fix(mobile): bound workflow attachments and await chat navigation

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx

@@ -11,8 +11,11 @@ import {
   PopoverItem,
   PopoverScrollArea,
   PopoverTrigger,
+  scrollFadeAttributes,
+  scrollFadeClass,
   Tooltip,
   Trash,
+  useScrollEdges,
 } from '@sim/emcn'
 import { ArrowUp, CircleAlert, Download, MoreVertical, Paperclip, Square, X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
@@ -300,6 +303,7 @@ export function Chat() {
   const [moreMenuOpen, setMoreMenuOpen] = useState(false)
 
   const inputRef = useRef<HTMLInputElement>(null)
+  const attachmentsRef = useRef<HTMLDivElement>(null)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
   const streamReaderRef = useRef<ReadableStreamDefaultReader<Uint8Array> | null>(null)
   const preventZoomRef = usePreventZoom()
@@ -318,6 +322,9 @@ export function Chat() {
     handleDragLeave,
     handleDrop,
   } = useChatFileUpload()
+  const attachmentEdges = useScrollEdges(attachmentsRef, {
+    enabled: isChatOpen && chatFiles.length > 0,
+  })
 
   /**
    * Resolves the unified start block for chat execution, if available.
@@ -1084,10 +1091,19 @@ export function Chat() {
           >
             {/* File thumbnails */}
             {chatFiles.length > 0 && (
-              <div className='mt-1 flex flex-wrap gap-1.5'>
-                {chatFiles.map((file) => (
-                  <ChatFilePreview key={file.id} file={file} onRemove={removeFile} />
-                ))}
+              <div
+                ref={attachmentsRef}
+                className={cn(
+                  'mt-1 pointer-coarse:max-h-[102px] pointer-coarse:overflow-y-auto pointer-coarse:overscroll-contain',
+                  scrollFadeClass
+                )}
+                {...scrollFadeAttributes(attachmentEdges)}
+              >
+                <div className='flex flex-wrap gap-1.5'>
+                  {chatFiles.map((file) => (
+                    <ChatFilePreview key={file.id} file={file} onRemove={removeFile} />
+                  ))}
+                </div>
               </div>
             )}
 

apps/sim/scripts/test-mobile-e2e.ts

@@ -557,7 +557,7 @@ async function exerciseViewport(
         `${prefix}/navigation opens, dismisses, and preserves desktop preferences`,
         page,
         async () => {
-          await visit(page, 'home')
+          await visit(page, 'files')
           const sidebar = page.getByRole('complementary', { name: 'Workspace sidebar' })
           const openNavigation = page.getByRole('button', { name: 'Open navigation', exact: true })
           await openNavigation.focus()
@@ -574,6 +574,8 @@ async function exerciseViewport(
           await expectContained(page, sidebar)
           if (viewport.name === 'phone') await capture(page, `${browserName}-phone-navigation`)
           await sidebar.getByRole('link', { name: 'New chat', exact: true }).tap()
+          await expect(page).toHaveURL(`${baseUrl.origin}/workspace/${workspaceId}/home`)
+          await expect(page.getByRole('textbox', { name: 'Message', exact: true })).toBeVisible()
           await expect(sidebar).toBeHidden()
           await page.getByRole('button', { name: 'Open navigation', exact: true }).tap()
           await page.getByRole('button', { name: 'Close navigation', exact: true }).tap()