fix(chat): keep the remove badge anchored to the file card

The card wrapper had no width cap, so it sized to the filename's max-content
width while the card itself capped at 220px. The remove badge is positioned
against that wrapper, so a long filename stranded it far to the right of the
card it belongs to.

Moves the cap onto the wrapper and lets the card fill it.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.test.tsx

@@ -67,6 +67,16 @@ describe('AttachedFilesList', () => {
     expect(container.querySelector('img')).toBeNull()
   })
 
+  it('caps the card wrapper so a long filename cannot strand the remove badge', () => {
+    // The badge is positioned against this wrapper. Without a cap here the wrapper
+    // stretches to the filename's max-content width while the card stays 220px, and
+    // the badge drifts off to the right of the card.
+    render([file({ name: '9bacf973-cd64-437b-be12-58be9f2c1a4d-very-long-name.pdf' })])
+
+    const wrapper = container.querySelector('button')?.parentElement
+    expect(wrapper?.className).toContain('max-w-[min(220px,100%)]')
+  })
+
   it('drops the image and reveals the type icon when the preview fails to decode', () => {
     render([file({ name: 'photo.heic', type: 'image/heic', previewUrl: '/api/files/serve/x' })])
 

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx

@@ -54,17 +54,25 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
 
   return (
     <Tooltip.Root>
-      <div className={cn('group relative', isMedia ? 'flex-shrink-0' : 'min-w-0')}>
+      {/* The width cap lives here, not on the button: this wrapper anchors the remove
+          badge, and sizing it to the button's uncapped max-content width would strand
+          the badge far to the right of a long filename. */}
+      <div
+        className={cn(
+          'group relative',
+          isMedia ? 'flex-shrink-0' : 'min-w-0 max-w-[min(220px,100%)]'
+        )}
+      >
         <Tooltip.Trigger asChild>
           <button
             type='button'
             className={cn(
               CHIP_SURFACE,
               isMedia
                 ? 'w-[48px] overflow-hidden'
-                : // Capped at 220px but never wider than the composer, so a long filename
-                  // truncates on a narrow viewport instead of overflowing the shell.
-                  'flex max-w-[min(220px,100%)] items-center gap-2 py-2 pr-3 pl-2'
+                : // Fills the capped wrapper, so the filename truncates rather than
+                  // widening the card past the badge it is anchored to.
+                  'flex w-full items-center gap-2 py-2 pr-3 pl-2'
             )}
             onClick={() => onFileClick(file)}
           >