fix(web): improve card grid responsiveness (#38263)

web/features/agent-v2/roster/components/__tests__/agent-roster-list.spec.tsx

@@ -165,11 +165,22 @@ describe('AgentRosterList', () => {
 
   it('renders the Figma-aligned empty roster overlay', () => {
     const { container } = renderList([])
+    const placeholderGrid = Array.from(container.querySelectorAll('.pointer-events-none'))
+      .find(element => element.className.includes('grid-rows-4'))
+
+    if (!placeholderGrid)
+      throw new Error('Expected agent roster placeholder grid to render')
 
     expect(screen.getByRole('heading', { name: 'agentV2.roster.empty' })).toHaveClass('system-sm-regular', 'text-text-tertiary')
     expect(container.querySelectorAll('.bg-background-default-lighter')).toHaveLength(16)
     expect(container.querySelector('.bg-linear-to-b')).toBeInTheDocument()
     expect(container.querySelector('.i-ri-robot-2-line')).toHaveClass('size-6', 'text-text-tertiary')
+    expect(placeholderGrid).toHaveClass(
+      'grid',
+      'grid-cols-[repeat(auto-fill,minmax(296px,1fr))]',
+      'grid-rows-4',
+    )
+    expect(placeholderGrid).not.toHaveClass('grid-cols-1', 'sm:grid-cols-2', 'lg:grid-cols-3', 'xl:grid-cols-4')
   })
 
   it('uses the same overlay treatment for empty search results', () => {

web/features/agent-v2/roster/components/agent-roster-list.tsx

@@ -71,7 +71,7 @@ function AgentRosterPlaceholderState({ title }: { title: string }) {
       aria-labelledby="agent-roster-placeholder-title"
       className="relative col-span-full min-h-[calc(100vh-142px)] overflow-hidden"
     >
-      <div className="pointer-events-none absolute inset-0 grid grid-cols-1 grid-rows-4 gap-3 sm:grid-cols-2 xl:grid-cols-4">
+      <div className="pointer-events-none absolute inset-0 grid grid-cols-[repeat(auto-fill,minmax(296px,1fr))] grid-rows-4 gap-3">
         {emptyPlaceholderCardIds.map(id => (
           <div key={id} className="rounded-xl bg-background-default-lighter opacity-75" />
         ))}
@@ -262,7 +262,7 @@ export function AgentRosterList({
   const { t } = useTranslation('agentV2')
 
   return (
-    <section aria-label={label} className="grid grid-cols-[repeat(auto-fill,minmax(min(100%,294px),1fr))] gap-2.5" aria-busy={isFetching || undefined}>
+    <section aria-label={label} className="grid grid-cols-[repeat(auto-fill,minmax(296px,1fr))] gap-2.5" aria-busy={isFetching || undefined}>
       {isPending && <AgentRosterSkeleton />}
       {!isPending && isError && (
         <AgentRosterPlaceholderState title={t('roster.loadingError')} />

web/features/tag-management/__tests__/tag-filter.spec.tsx

@@ -95,6 +95,11 @@ describe('TagFilter', () => {
       expect(container.querySelector('svg')).not.toBeInTheDocument()
     })
 
+    it('should apply custom trigger class names', () => {
+      render(<TagFilter {...defaultProps} triggerClassName="min-w-0" />)
+      expect(screen.getByRole('combobox', { name: i18n.placeholder })).toHaveClass('min-w-0')
+    })
+
     it('should filter tags by type prop', async () => {
       const user = userEvent.setup()
       render(<TagFilter {...defaultProps} type="knowledge" />)

web/features/tag-management/components/tag-filter.tsx

@@ -19,6 +19,7 @@ type TagFilterProps = {
   onChange: (v: string[]) => void
   onOpenTagManagement?: () => void
   showLeadingIcon?: boolean
+  triggerClassName?: string
 }
 export const TagFilter = ({
   type,
@@ -26,6 +27,7 @@ export const TagFilter = ({
   onChange,
   onOpenTagManagement = () => {},
   showLeadingIcon = true,
+  triggerClassName,
 }: TagFilterProps) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
@@ -76,8 +78,9 @@ export const TagFilter = ({
           aria-label={triggerLabel}
           icon={false}
           className={cn(
-            'flex h-8 max-w-60 min-w-28 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 py-0 text-left select-none hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal focus-visible:ring-2 focus-visible:ring-state-accent-solid data-popup-open:bg-components-input-bg-normal',
+            'flex h-8 max-w-60 min-w-28 cursor-pointer items-center gap-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 py-0 text-left whitespace-nowrap select-none hover:bg-components-input-bg-normal focus-visible:bg-components-input-bg-normal focus-visible:ring-2 focus-visible:ring-state-accent-solid data-popup-open:bg-components-input-bg-normal',
             !!value.length && 'pr-6 shadow-xs',
+            triggerClassName,
           )}
         >
           <span className="flex w-full min-w-0 items-center gap-1">