fix(mobile): address interaction and viewport regressions

Author: waleedlatif1

apps/desktop/src/renderer/credential-picker/index.tsx

@@ -57,7 +57,7 @@ function CredentialPicker({ configuration, api }: CredentialPickerProps) {
         align='start'
         sideOffset={0}
         avoidCollisions={false}
-        className='w-[320px] max-w-none'
+        className='w-[320px] max-w-none max-md:max-w-none!'
         aria-label='Saved passwords'
         onOpenAutoFocus={(event) => {
           event.preventDefault()

apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { type ReactNode, type RefObject, useCallback, useMemo, useRef, useState } from 'react'
+import { usePrefersReducedMotion } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import {
@@ -70,6 +71,7 @@ function ChatViewport({ children }: ChatViewportProps) {
 }
 
 export default function ChatClient({ identifier }: { identifier: string }) {
+  const prefersReducedMotion = usePrefersReducedMotion()
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [isLoading, setIsLoading] = useState(false)
   const messagesEndRef = useRef<HTMLDivElement>(null)
@@ -113,7 +115,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
    * With `force` (jump button), re-pins to bottom.
    */
   const scrollToBottom = (options?: { behavior?: ScrollBehavior; force?: boolean }) => {
-    const behavior = options?.behavior ?? 'smooth'
+    const behavior = prefersReducedMotion ? 'auto' : (options?.behavior ?? 'smooth')
     const force = options?.force === true
     if (!force && !stickToBottomRef.current) return
     if (!messagesEndRef.current) return
@@ -143,7 +145,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
 
     container.scrollTo({
       top: container.scrollTop + messageRect.top - containerRect.top,
-      behavior: 'smooth',
+      behavior: prefersReducedMotion ? 'auto' : 'smooth',
     })
   }
 

apps/sim/app/(interfaces)/chat/components/input/input.tsx

@@ -8,7 +8,7 @@ import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import { CHAT_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
 import { PublicChatActionButton } from '@/app/(interfaces)/chat/components/input/public-chat-action-button'
-import { isMobileViewport } from '@/hooks/use-is-mobile'
+import { isTouchMobileViewport } from '@/hooks/use-is-mobile'
 
 const logger = createLogger('ChatInput')
 
@@ -110,7 +110,12 @@ export const ChatInput: React.FC<{
   }
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && !isMobileViewport()) {
+    if (
+      e.key === 'Enter' &&
+      !e.shiftKey &&
+      !e.nativeEvent.isComposing &&
+      !isTouchMobileViewport()
+    ) {
       e.preventDefault()
       handleSubmit()
     }

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -547,8 +547,12 @@ function BreadcrumbLocationPopover({
             }}
             onFocus={openPopover}
             onBlur={scheduleClose}
-            onMouseEnter={openPopover}
-            onMouseLeave={scheduleClose}
+            onPointerEnter={(event) => {
+              if (event.pointerType === 'mouse') openPopover()
+            }}
+            onPointerLeave={(event) => {
+              if (event.pointerType === 'mouse') scheduleClose()
+            }}
             onDragOver={drag?.onDragOver}
             onDragLeave={drag?.onDragLeave}
             onDrop={drag?.onDrop}
@@ -577,8 +581,12 @@ function BreadcrumbLocationPopover({
           maxHeight={420}
           border
           className={POPOVER_ANIMATION_CLASSES}
-          onMouseEnter={openPopover}
-          onMouseLeave={scheduleClose}
+          onPointerEnter={(event) => {
+            if (event.pointerType === 'mouse') openPopover()
+          }}
+          onPointerLeave={(event) => {
+            if (event.pointerType === 'mouse') scheduleClose()
+          }}
         >
           <PopoverSection>
             <span className='inline-flex items-center gap-1'>

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx

@@ -276,7 +276,8 @@ export function ZoomablePreview({
           <div
             ref={contentRef}
             className={cn(
-              'flex items-center justify-center will-change-transform',
+              'flex items-center justify-center',
+              (zoom !== 1 || offset.x !== 0 || offset.y !== 0) && 'will-change-transform',
               contentClassName
             )}
             style={{

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts

@@ -39,7 +39,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/utils'
 import { type McpServer, useMcpToolServers } from '@/hooks/queries/mcp'
 import { type SkillDefinition, useSkills } from '@/hooks/queries/skills'
-import { isMobileViewport } from '@/hooks/use-is-mobile'
+import { isTouchMobileViewport } from '@/hooks/use-is-mobile'
 import type { ChatContext } from '@/stores/panel'
 
 /**
@@ -961,7 +961,7 @@ export function usePromptEditor({
         e.key === 'Enter' &&
         !e.shiftKey &&
         !e.nativeEvent.isComposing &&
-        !isMobileViewport() &&
+        !isTouchMobileViewport() &&
         policy?.onSubmit
       ) {
         e.preventDefault()

apps/sim/app/workspace/[workspaceId]/home/hooks/use-resource-panel.ts

@@ -94,15 +94,15 @@ export function useResourcePanelController() {
     isResourceCollapsedRef.current = collapsed
     setIsResourceCollapsedState(collapsed)
   }, [])
-  const resourceCollapseOwnedByUserRef = useRef(false)
+  const [resourceCollapseOwnedByUser, setResourceCollapseOwnedByUser] = useState(false)
   const resourceSelectionOwnedByUserRef = useRef(false)
 
   function handleResourceEvent(resourceId: string, options?: ResourceEventOptions) {
     const activeResourceId = effectiveActiveResourceIdRef.current
     const presentation = resolveResourceEventPresentation({
       activeResourceId,
       activationRequested: shouldActivateResourceEvent(activeResourceId, resourceId, options),
-      panelCollapseOwnedByUser: resourceCollapseOwnedByUserRef.current,
+      panelCollapseOwnedByUser: resourceCollapseOwnedByUser,
       panelCollapsed: isResourceCollapsedRef.current,
       resourceId,
       selectionOwnedByUser: resourceSelectionOwnedByUserRef.current,
@@ -156,7 +156,8 @@ export function useResourcePanelController() {
     resourceActivityIds,
     setResourceActivityIds,
     isResourceCollapsedRef,
-    resourceCollapseOwnedByUserRef,
+    resourceCollapseOwnedByUser,
+    setResourceCollapseOwnedByUser,
     resourceSelectionOwnedByUserRef,
     effectiveActiveResourceIdRef,
     onResourceEvent: handleResourceEvent,
@@ -196,7 +197,8 @@ export function useChatResourcePanel(
     setSkipResourceTransition,
     setResourceActivityIds,
     isResourceCollapsedRef,
-    resourceCollapseOwnedByUserRef,
+    resourceCollapseOwnedByUser,
+    setResourceCollapseOwnedByUser,
     resourceSelectionOwnedByUserRef,
     effectiveActiveResourceIdRef,
     onResourceEvent: handleResourceEvent,
@@ -207,10 +209,10 @@ export function useChatResourcePanel(
   const resourceAttentionChatIdRef = useRef(resolvedChatId)
 
   const collapseResource = useCallback(() => {
-    resourceCollapseOwnedByUserRef.current = true
+    setResourceCollapseOwnedByUser(true)
     resourceSelectionOwnedByUserRef.current = true
     setResourceCollapsed(true)
-  }, [setResourceCollapsed])
+  }, [setResourceCollapsed, setResourceCollapseOwnedByUser])
 
   const clearResourceActivity = useCallback((resourceId: string) => {
     setResourceActivityIds((current) => {
@@ -222,7 +224,7 @@ export function useChatResourcePanel(
   }, [])
 
   const expandResource = () => {
-    resourceCollapseOwnedByUserRef.current = false
+    setResourceCollapseOwnedByUser(false)
     resourceSelectionOwnedByUserRef.current = true
     const activeResourceId = effectiveActiveResourceIdRef.current
     if (activeResourceId) clearResourceActivity(activeResourceId)
@@ -254,13 +256,13 @@ export function useChatResourcePanel(
 
   const addResourceFromUser = useCallback(
     (resource: MothershipResource) => {
-      resourceCollapseOwnedByUserRef.current = false
+      setResourceCollapseOwnedByUser(false)
       resourceSelectionOwnedByUserRef.current = true
       addResource(resource)
       selectResourceFromUser(getChatResourceSelectionId(resource))
       setResourceCollapsed(false)
     },
-    [addResource, selectResourceFromUser, setResourceCollapsed]
+    [addResource, selectResourceFromUser, setResourceCollapsed, setResourceCollapseOwnedByUser]
   )
 
   const handleResourceResizePointerDown = useCallback(
@@ -295,25 +297,25 @@ export function useChatResourcePanel(
       setResourceCollapsed(true)
     }
     if (!resolvedChatId || (previousChatId && previousChatId !== resolvedChatId)) {
-      resourceCollapseOwnedByUserRef.current = false
+      setResourceCollapseOwnedByUser(false)
       resourceSelectionOwnedByUserRef.current = false
       setResourceActivityIds(new Set())
     }
-  }, [resolvedChatId, setResourceCollapsed])
+  }, [resolvedChatId, setResourceCollapsed, setResourceCollapseOwnedByUser])
 
   useEffect(() => {
     if (
       isCompactLayout !== false ||
       !(resources.length > 0 && isResourceCollapsedRef.current) ||
-      resourceCollapseOwnedByUserRef.current
+      resourceCollapseOwnedByUser
     ) {
       return
     }
     setResourceCollapsed(false)
     setSkipResourceTransition(true)
     const id = requestAnimationFrame(() => setSkipResourceTransition(false))
     return () => cancelAnimationFrame(id)
-  }, [isCompactLayout, resources, setResourceCollapsed])
+  }, [isCompactLayout, resources, resourceCollapseOwnedByUser, setResourceCollapsed])
 
   useEffect(() => {
     if (resources.length === 0 && !isResourceCollapsedRef.current) {
@@ -333,6 +335,7 @@ export function useChatResourcePanel(
     ...controller,
     initialScrollBlocked:
       resources.length > 0 &&
+      !resourceCollapseOwnedByUser &&
       (isCompactLayout === null || (isCompactLayout === false && isResourceCollapsed)),
     desktopTabResourceOptions,
     mothershipRef,

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -36,6 +36,7 @@ import type {
   WorkflowLogSummary,
 } from '@/lib/api/contracts/logs'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
+import { getContextMenuPosition } from '@/lib/core/utils/context-menu'
 import { formatDateShort } from '@/lib/core/utils/date-display'
 import {
   getEndDateFromTimeRange,
@@ -537,7 +538,7 @@ export default function Logs() {
     (e: React.MouseEvent, rowId: string) => {
       e.preventDefault()
       const log = logs.find((l) => l.id === rowId) ?? null
-      setContextMenuPosition({ x: e.clientX, y: e.clientY })
+      setContextMenuPosition(getContextMenuPosition(e))
       setContextMenuLog(log)
       setContextMenuOpen(true)
     },

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx

@@ -116,8 +116,12 @@ export const ViewsMenu = memo(function ViewsMenu({
           onClick={openPopover}
           onFocus={openPopover}
           onBlur={scheduleClose}
-          onMouseEnter={openPopover}
-          onMouseLeave={scheduleClose}
+          onPointerEnter={(event) => {
+            if (event.pointerType === 'mouse') openPopover()
+          }}
+          onPointerLeave={(event) => {
+            if (event.pointerType === 'mouse') scheduleClose()
+          }}
           className={cn(chipVariants(), 'max-w-[220px]')}
         >
           <OverflowText
@@ -137,8 +141,12 @@ export const ViewsMenu = memo(function ViewsMenu({
         maxHeight={420}
         border
         className={POPOVER_ANIMATION_CLASSES}
-        onMouseEnter={openPopover}
-        onMouseLeave={scheduleClose}
+        onPointerEnter={(event) => {
+          if (event.pointerType === 'mouse') openPopover()
+        }}
+        onPointerLeave={(event) => {
+          if (event.pointerType === 'mouse') scheduleClose()
+        }}
         onFocusCapture={cancelScheduledClose}
       >
         <PopoverSection>Views</PopoverSection>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts

@@ -20,15 +20,6 @@ function getPanelContainer(): HTMLElement | null {
   return document.querySelector<HTMLElement>('.panel-container')
 }
 
-/**
- * The toast stack also insets its right edge by `--panel-width`, but is
- * portalled to `<body>` and so shares no ancestor with the panel. See
- * `use-terminal-resize.ts` for why this is written alongside the primary.
- */
-function getToastViewport(): (HTMLElement | null)[] {
-  return [document.querySelector<HTMLElement>('[data-toast-viewport]')]
-}
-
 /**
  * Handles panel drag-resize with zero React renders during the drag. The
  * `--panel-width` variable is written to `.panel-container` (a scoped style
@@ -45,7 +36,6 @@ export function usePanelResize() {
     cursor: 'ew-resize',
     cssVar: '--panel-width',
     getTarget: getPanelContainer,
-    getExtraTargets: getToastViewport,
     compute: computePanelWidth,
     commit: (width) => {
       const panel = getPanelContainer()