fix(mobile): keep floating tools and actions within visible bounds

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -1310,7 +1310,7 @@ export function Document({
       />
 
       <ActionBar
-        className={tablePagination ? 'bottom-[72px]' : undefined}
+        className={tablePagination ? 'bottom-[max(72px,env(safe-area-inset-bottom))]' : undefined}
         selectedCount={selectedChunks.size}
         onEnable={disabledCount > 0 && !isConnectorDocument ? handleBulkEnable : undefined}
         onDisable={enabledCount > 0 && !isConnectorDocument ? handleBulkDisable : undefined}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -1353,7 +1353,9 @@ export function KnowledgeBase({
           }}
           overlay={
             <ActionBar
-              className={totalPages > 1 ? 'bottom-[72px]' : undefined}
+              className={
+                totalPages > 1 ? 'bottom-[max(72px,env(safe-area-inset-bottom))]' : undefined
+              }
               selectedCount={selectedDocuments.size}
               onEnable={disabledCount > 0 ? handleBulkEnable : undefined}
               onDisable={enabledCount > 0 ? handleBulkDisable : undefined}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx

@@ -52,7 +52,7 @@ export function ActionBar({
         exit={{ opacity: 0, y: 10 }}
         transition={{ duration: 0.2 }}
         className={cn(
-          '-translate-x-1/2 fixed bottom-6 left-1/2 z-[var(--z-dropdown)] max-md:max-w-[calc(100%-2rem)]',
+          '-translate-x-1/2 fixed bottom-[max(1.5rem,env(safe-area-inset-bottom))] left-1/2 z-[var(--z-dropdown)] max-md:max-w-[calc(100%-2rem)]',
           className
         )}
       >

apps/sim/app/workspace/[workspaceId]/settings/components/activity-log/activity-log.tsx

@@ -168,41 +168,43 @@ export function ActivityLog({
   const hasTrailingColumn = entries.some((entry) => entry.trailing != null)
 
   return (
-    <div className='min-w-0 overflow-x-auto'>
-      <div
-        className={cn(
-          'flex flex-col md:min-w-0',
-          hasTrailingColumn ? 'min-w-[800px]' : 'min-w-[700px]'
-        )}
-      >
-        <div className='flex items-center gap-3 px-3 pb-1 text-[var(--text-tertiary)] text-caption'>
-          <span className='w-[160px] shrink-0'>Timestamp</span>
-          <span className={cn(EVENT_COLUMN_WIDTH_CLASS[eventColumn], 'shrink-0')}>
-            {eventLabel}
-          </span>
-          <span className='min-w-0 flex-1'>{descriptionLabel}</span>
-          <span className='w-[160px] shrink-0 text-right'>Actor</span>
-          {/* Row actions carry no header, but the column must still be reserved
+    <div className='min-w-0'>
+      <div className='overflow-x-auto'>
+        <div
+          className={cn(
+            'flex flex-col md:min-w-0',
+            hasTrailingColumn ? 'min-w-[800px]' : 'min-w-[700px]'
+          )}
+        >
+          <div className='flex items-center gap-3 px-3 pb-1 text-[var(--text-tertiary)] text-caption'>
+            <span className='w-[160px] shrink-0'>Timestamp</span>
+            <span className={cn(EVENT_COLUMN_WIDTH_CLASS[eventColumn], 'shrink-0')}>
+              {eventLabel}
+            </span>
+            <span className='min-w-0 flex-1'>{descriptionLabel}</span>
+            <span className='w-[160px] shrink-0 text-right'>Actor</span>
+            {/* Row actions carry no header, but the column must still be reserved
             here or every label above would sit left of the data below it. */}
-          {hasTrailingColumn && (
-            <span className={cn(TRAILING_COLUMN_WIDTH_CLASS, 'shrink-0')} aria-hidden />
+            {hasTrailingColumn && (
+              <span className={cn(TRAILING_COLUMN_WIDTH_CLASS, 'shrink-0')} aria-hidden />
+            )}
+          </div>
+
+          {entries.length > 0 && (
+            <div className='flex flex-col gap-0.5'>
+              {entries.map((entry) => (
+                <ActivityLogRow
+                  key={entry.id}
+                  entry={entry}
+                  eventColumn={eventColumn}
+                  hasTrailingColumn={hasTrailingColumn}
+                />
+              ))}
+            </div>
           )}
         </div>
-
-        {entries.length > 0 && (
-          <div className='flex flex-col gap-0.5'>
-            {entries.map((entry) => (
-              <ActivityLogRow
-                key={entry.id}
-                entry={entry}
-                eventColumn={eventColumn}
-                hasTrailingColumn={hasTrailingColumn}
-              />
-            ))}
-            {footer}
-          </div>
-        )}
       </div>
+      {entries.length > 0 && footer && <div className='mt-0.5'>{footer}</div>}
       {entries.length === 0 && emptyState}
     </div>
   )

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx

@@ -85,7 +85,7 @@ export function TableActionBar({
             exit={{ opacity: 0, y: 10 }}
             transition={{ duration: 0.2 }}
             className={cn(
-              '-translate-x-1/2 pointer-events-none absolute bottom-6 left-1/2 z-50 max-md:max-w-[calc(100%-2rem)]',
+              '-translate-x-1/2 pointer-events-none absolute bottom-[max(1.5rem,env(safe-area-inset-bottom))] left-1/2 z-50 max-md:max-w-[calc(100%-2rem)]',
               className
             )}
           >

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

@@ -22,11 +22,6 @@ vi.mock('@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components
   ChatMessage: () => null,
   OutputSelect: () => null,
 }))
-vi.mock('@/app/workspace/[workspaceId]/w/[workflowId]/hooks/float', () => ({
-  useFloatDrag: () => ({}),
-  useFloatBoundarySync: () => {},
-  useFloatResize: () => ({}),
-}))
 
 let root: Root
 let container: HTMLDivElement

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

@@ -49,6 +49,7 @@ import {
 import {
   useFloatBoundarySync,
   useFloatDrag,
+  useFloatLayout,
   useFloatResize,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/float'
 import {
@@ -391,40 +392,27 @@ export function Chat() {
   const shouldShowConfigureStartInputsButton =
     Boolean(startBlockId) && missingStartReservedFields.length > 0
 
-  const isFloatingLayout = useCallback(() => {
-    const element = preventZoomRef.current
-    return element !== null && getComputedStyle(element).position === 'fixed'
-  }, [preventZoomRef])
-
-  const updateDesktopPosition = useCallback(
-    (position: { x: number; y: number }) => {
-      if (isFloatingLayout()) setChatPosition(position)
-    },
-    [isFloatingLayout, setChatPosition]
-  )
-
-  const updateDesktopDimensions = useCallback(
-    (dimensions: { width: number; height: number }) => {
-      if (isFloatingLayout()) setChatDimensions(dimensions)
-    },
-    [isFloatingLayout, setChatDimensions]
-  )
+  const { isFloatingLayout, updatePosition, updateDimensions } = useFloatLayout({
+    ref: preventZoomRef,
+    onPositionChange: setChatPosition,
+    onDimensionsChange: setChatDimensions,
+  })
 
-  const actualPosition = chatPosition ?? getChatPosition(null, chatWidth, chatHeight)
+  const actualPosition = getChatPosition(chatPosition, chatWidth, chatHeight)
 
   const { handleMouseDown } = useFloatDrag({
     position: actualPosition,
     width: chatWidth,
     height: chatHeight,
-    onPositionChange: updateDesktopPosition,
+    onPositionChange: updatePosition,
   })
 
   useFloatBoundarySync({
     isOpen: isChatOpen && !isMobile,
     position: actualPosition,
     width: chatWidth,
     height: chatHeight,
-    onPositionChange: updateDesktopPosition,
+    onPositionChange: updatePosition,
   })
 
   const {
@@ -436,8 +424,8 @@ export function Chat() {
     position: actualPosition,
     width: chatWidth,
     height: chatHeight,
-    onPositionChange: updateDesktopPosition,
-    onDimensionsChange: updateDesktopDimensions,
+    onPositionChange: updatePosition,
+    onDimensionsChange: updateDimensions,
   })
 
   const workflowMessages = useMemo(() => {

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

@@ -91,6 +91,7 @@ import { useVariablesModalStore } from '@/stores/variables/modal'
 import { useVariablesStore } from '@/stores/variables/store'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { captureBaselineSnapshot } from '@/stores/workflow-diff/utils'
+import { useWorkflowSearchReplaceStore } from '@/stores/workflow-search-replace/store'
 import { getWorkflowWithValues } from '@/stores/workflows'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
@@ -306,6 +307,9 @@ export const Panel = memo(function Panel() {
     }))
   )
 
+  const isSearchOpen = useWorkflowSearchReplaceStore((state) => state.isOpen)
+  const hasCanvasOverlay = isChatOpen || isVariablesOpen || isSearchOpen
+
   const currentWorkflow = activeWorkflowId ? workflows[activeWorkflowId] : null
   const workflowLocked = isWorkflowEffectivelyLocked(currentWorkflow, folders)
   const canMutateWorkflow = userPermissions.canEdit && !workflowLocked
@@ -736,7 +740,7 @@ export const Panel = memo(function Panel() {
       <div
         className={cn(
           'absolute top-3 right-3 z-[var(--z-dropdown)] @min-[960px]/workflow:hidden',
-          isChatOpen && 'hidden'
+          hasCanvasOverlay && 'hidden'
         )}
       >
         <Chip
@@ -761,7 +765,7 @@ export const Panel = memo(function Panel() {
         id='workflow-panel'
         className={cn(
           'panel-container @max-[960px]/workflow:absolute relative @max-[960px]/workflow:inset-0 @max-[960px]/workflow:z-[var(--z-dropdown)] @max-[960px]/workflow:w-full! shrink-0 overflow-hidden bg-[var(--bg)]',
-          !isMobilePanelOpen && '@max-[960px]/workflow:hidden'
+          (!isMobilePanelOpen || hasCanvasOverlay) && '@max-[960px]/workflow:hidden'
         )}
         aria-label='Workflow panel'
       >
@@ -802,7 +806,12 @@ export const Panel = memo(function Panel() {
                     <Layout animate={isAutoLayouting} variant='clockwise' />
                     Auto layout
                   </DropdownMenuItem>
-                  <DropdownMenuItem onSelect={() => setVariablesOpen(!isVariablesOpen)}>
+                  <DropdownMenuItem
+                    onSelect={() => {
+                      setVariablesOpen(!isVariablesOpen)
+                      setIsMobilePanelOpen(false)
+                    }}
+                  >
                     <VariableIcon />
                     Variables
                   </DropdownMenuItem>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/components/replacement-controls/replacement-controls.tsx

@@ -55,21 +55,21 @@ export function ReplacementControls({
         />
       )}
 
-      <div className='flex items-center justify-between gap-2'>
+      <div className='flex @max-[960px]/workflow:flex-wrap items-center justify-between gap-2'>
         <span className='text-[var(--text-muted)] text-xs'>
           {eligibleCount} replaceable match{eligibleCount === 1 ? '' : 'es'}
         </span>
-        <div className='flex gap-1.5'>
+        <div className='@max-[960px]/workflow:ml-auto flex shrink-0 gap-1.5'>
           <Button
-            className='h-8 text-xs'
+            className='h-8 @max-[960px]/workflow:pointer-coarse:min-h-11 text-xs'
             variant='default'
             disabled={disabled || isApplying || !canReplaceActive}
             onClick={onReplaceActive}
           >
             Replace
           </Button>
           <Button
-            className='h-8 text-xs'
+            className='h-8 @max-[960px]/workflow:pointer-coarse:min-h-11 text-xs'
             variant='active'
             disabled={disabled || isApplying || !canReplaceAll}
             onClick={onReplaceAll}