From e7faad34a7e8efaeb2b02942538c3f45388e46b1 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Tue, 8 Sep 2026 22:41:05 -0700
Subject: [PATCH 1/3] fix(chat): align organization focus and loading with
 workspace (#7647)

---
 .../chats-section/chats-section.test.tsx      |  61 ++++++++--
 .../chats-section/chats-section.tsx           |  17 ++-
 .../home/components/composer/composer.tsx     |   5 +
 .../home/organization-home.test.tsx           |  48 +++++++-
 .../home/organization-home.tsx                |   6 +-
 .../home/components/user-input/user-input.tsx |  22 +---
 apps/sim/hooks/use-chat-input-focus.test.tsx  | 108 ++++++++++++++++++
 apps/sim/hooks/use-chat-input-focus.ts        |  23 ++++
 8 files changed, 250 insertions(+), 40 deletions(-)
 create mode 100644 apps/sim/hooks/use-chat-input-focus.test.tsx
 create mode 100644 apps/sim/hooks/use-chat-input-focus.ts

diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.test.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.test.tsx
index c95da914201..e4b3856a5d3 100644
--- a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.test.tsx
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.test.tsx
@@ -2,6 +2,7 @@
  * @vitest-environment jsdom
  */
 import { act } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { OrganizationChat } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
@@ -9,7 +10,16 @@ import type { OrganizationChat } from '@/app/o/[organizationId]/components/organ
 const hoverState = vi.hoisted(() => ({ isOpen: false }))
 
 vi.mock('next/link', () => ({
-  default: ({ href, children, ...props }: { href: string; children: React.ReactNode }) => (
+  default: ({
+    href,
+    children,
+    prefetch: _prefetch,
+    ...props
+  }: {
+    href: string
+    children: React.ReactNode
+    prefetch?: boolean
+  }) => (
     <a href={href} {...props}>
       {children}
     </a>
@@ -36,6 +46,8 @@ const CHATS: OrganizationChat[] = Array.from({ length: 8 }, (_, index) => ({
 
 let container: HTMLDivElement
 let root: Root
+let queryClient: QueryClient
+let prefetchQuery: ReturnType<typeof vi.spyOn>
 
 beforeEach(() => {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
@@ -48,6 +60,8 @@ beforeEach(() => {
     }
   )
   hoverState.isOpen = false
+  queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  prefetchQuery = vi.spyOn(queryClient, 'prefetchQuery').mockResolvedValue()
   container = document.createElement('div')
   document.body.appendChild(container)
   root = createRoot(container)
@@ -56,22 +70,25 @@ beforeEach(() => {
 afterEach(async () => {
   await act(async () => root.unmount())
   container.remove()
+  queryClient.clear()
   vi.unstubAllGlobals()
 })
 
 async function render(props: Partial<Parameters<typeof ChatsSection>[0]> = {}) {
   await act(async () => {
     root.render(
-      <ChatsSection
-        chats={CHATS}
-        isLoading={false}
-        isCollapsed={false}
-        pathname={null}
-        menuOpenHref={null}
-        onContextMenu={() => {}}
-        onMoreClick={() => {}}
-        {...props}
-      />
+      <QueryClientProvider client={queryClient}>
+        <ChatsSection
+          chats={CHATS}
+          isLoading={false}
+          isCollapsed={false}
+          pathname={null}
+          menuOpenHref={null}
+          onContextMenu={() => {}}
+          onMoreClick={() => {}}
+          {...props}
+        />
+      </QueryClientProvider>
     )
   })
 }
@@ -103,6 +120,28 @@ describe('ChatsSection', () => {
     await act(async () => button?.click())
 
     expect(onMoreClick).toHaveBeenCalledWith(expect.anything(), '/o/org-1/chat/chat-2')
+    expect(prefetchQuery).not.toHaveBeenCalled()
+  })
+
+  it.each([false, true])(
+    'prefetches focused destination history with collapsed=%s',
+    async (isCollapsed) => {
+      hoverState.isOpen = isCollapsed
+      await render({ isCollapsed })
+      prefetchQuery.mockClear()
+      const link = document.body.querySelector<HTMLAnchorElement>('a[href="/o/org-1/chat/chat-3"]')!
+      await act(async () => link.focus())
+      expect(prefetchQuery).toHaveBeenCalledWith(
+        expect.objectContaining({ queryKey: ['mothership-chats', 'detail', 'chat-3'] })
+      )
+    }
+  )
+
+  it('does not prefetch the active conversation', async () => {
+    await render({ pathname: '/o/org-1/chat/chat-3' })
+    const link = container.querySelector<HTMLAnchorElement>('a[href="/o/org-1/chat/chat-3"]')!
+    await act(async () => link.focus())
+    expect(prefetchQuery).not.toHaveBeenCalled()
   })
 
   it('shows the empty state when there are no chats', async () => {
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx
index 042bca94ad8..351afadfeae 100644
--- a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx
@@ -2,10 +2,10 @@
 
 import { chipVariants, cn, DropdownMenuItem, Loader, OverflowText, Skeleton } from '@sim/emcn'
 import { MoreHorizontal, Pin, Task } from '@sim/emcn/icons'
-import Link from 'next/link'
 import type { OrganizationChat } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
 import { ConversationListItem } from '@/app/workspace/[workspaceId]/components'
 import {
+  ChatNavigationLink,
   CollapsedSidebarMenu,
   SidebarSection,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
@@ -41,8 +41,10 @@ function ChatRow({ chat, isCurrentRoute, isMenuOpen, onContextMenu, onMoreClick
   const showStatusDot = Boolean(chat.isActive) || (!isCurrentRoute && Boolean(chat.isUnread))
 
   return (
-    <Link
+    <ChatNavigationLink
       href={chat.href}
+      chatId={chat.id}
+      isCurrentRoute={isCurrentRoute}
       className={chipVariants({ active: isCurrentRoute || isMenuOpen, fullWidth: true })}
       onContextMenu={(e) => onContextMenu(e, chat.href)}
     >
@@ -83,7 +85,7 @@ function ChatRow({ chat, isCurrentRoute, isMenuOpen, onContextMenu, onMoreClick
           <MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
         </button>
       </div>
-    </Link>
+    </ChatNavigationLink>
   )
 }
 
@@ -140,13 +142,18 @@ export function ChatsSection({
                 const isCurrentRoute = pathname === chat.href
                 return (
                   <DropdownMenuItem key={chat.id} asChild active={isCurrentRoute}>
-                    <Link href={chat.href} onContextMenu={(e) => onContextMenu(e, chat.href)}>
+                    <ChatNavigationLink
+                      href={chat.href}
+                      chatId={chat.id}
+                      isCurrentRoute={isCurrentRoute}
+                      onContextMenu={(e) => onContextMenu(e, chat.href)}
+                    >
                       <ConversationListItem
                         title={chat.name}
                         isActive={Boolean(chat.isActive)}
                         isUnread={Boolean(chat.isUnread) && !isCurrentRoute}
                       />
-                    </Link>
+                    </ChatNavigationLink>
                   </DropdownMenuItem>
                 )
               })
diff --git a/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx b/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx
index e0992209015..9189db61670 100644
--- a/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx
+++ b/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx
@@ -1,8 +1,10 @@
 'use client'
 
+import { useRef } from 'react'
 import { Button, cn } from '@sim/emcn'
 import { ArrowUp } from '@sim/emcn/icons'
 import { useAnimatedPlaceholder } from '@/hooks/use-animated-placeholder'
+import { useChatInputFocus } from '@/hooks/use-chat-input-focus'
 
 const SEND_BUTTON_BASE = 'size-[28px] rounded-full border-0 p-0 transition-colors'
 const SEND_BUTTON_ACTIVE =
@@ -32,6 +34,8 @@ export function Composer({
   onSubmit,
   onStop,
 }: ComposerProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  useChatInputFocus({ textareaRef })
   const canSubmit = value.trim().length > 0
   const animatedPlaceholder = useAnimatedPlaceholder(isInitialView)
   const placeholder = isInitialView ? animatedPlaceholder : 'Send message to Sim'
@@ -50,6 +54,7 @@ export function Composer({
         )}
       >
         <textarea
+          ref={textareaRef}
           value={value}
           onChange={(event) => onChange(event.target.value)}
           onKeyDown={(event) => {
diff --git a/apps/sim/app/o/[organizationId]/home/organization-home.test.tsx b/apps/sim/app/o/[organizationId]/home/organization-home.test.tsx
index 36dac6131ca..450e0854d97 100644
--- a/apps/sim/app/o/[organizationId]/home/organization-home.test.tsx
+++ b/apps/sim/app/o/[organizationId]/home/organization-home.test.tsx
@@ -1,5 +1,5 @@
 /** @vitest-environment jsdom */
-import { act, type ComponentProps } from 'react'
+import { act, type ComponentProps, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -96,6 +96,52 @@ describe('organization home', () => {
     expect(container.textContent).not.toContain('Get started')
     expect(mocks.consume).not.toHaveBeenCalled()
   })
+  it('keeps the composer available when messages exist while history is pending', async () => {
+    mocks.chat.mockReturnValue({
+      messages: [{ id: 'message-a', role: 'user', content: 'A question' }],
+      isChatHistoryPending: true,
+      sendMessage: mocks.send,
+    })
+    await act(async () => root.render(<OrganizationHome chatId='chat-a' />))
+    expect(mocks.renderer).toHaveBeenCalledWith(
+      expect.objectContaining({ isLoading: false }),
+      undefined
+    )
+  })
+  it('isolates conversation state when switching cached chats', async () => {
+    mocks.chat.mockReturnValue({
+      messages: [],
+      isChatHistoryPending: false,
+      sendMessage: mocks.send,
+    })
+    mocks.renderer.mockImplementation(({ composer }: { composer: ReactNode }) => composer)
+    await act(async () => root.render(<OrganizationHome chatId='chat-a' />))
+    await act(async () => composerProps().onChange('A draft for chat A'))
+    await act(async () => root.render(<OrganizationHome chatId='chat-a' />))
+    expect(composerProps().value).toBe('A draft for chat A')
+    await act(async () => root.render(<OrganizationHome chatId='chat-b' />))
+    expect(composerProps().value).toBe('')
+    expect(mocks.chat).toHaveBeenLastCalledWith({ organizationId: 'organization-a' }, 'chat-b')
+    expect(mocks.send).not.toHaveBeenCalled()
+  })
+  it('preserves the conversation when the first send adopts a chat ID', async () => {
+    mocks.renderer.mockImplementation(({ composer }: { composer: ReactNode }) => composer)
+    await act(async () => root.render(<OrganizationHome />))
+    await act(async () => composerProps().onChange('A follow-up draft'))
+    mocks.chat.mockReturnValue({
+      messages: [{ id: 'message-a', role: 'user', content: 'First question' }],
+      resolvedChatId: 'chat-a',
+      isChatHistoryPending: true,
+      isSending: true,
+      sendMessage: mocks.send,
+    })
+    await act(async () => root.render(<OrganizationHome />))
+    expect(composerProps().value).toBe('A follow-up draft')
+    expect(mocks.renderer).toHaveBeenCalledWith(
+      expect.objectContaining({ chatId: 'chat-a', isLoading: false, isSending: true }),
+      undefined
+    )
+  })
   it.each([
     { isAdmin: true, integrationHref: '/o/organization-a/settings/integrations' },
     { isAdmin: false, integrationHref: '/o/organization-a/integrations' },
diff --git a/apps/sim/app/o/[organizationId]/home/organization-home.tsx b/apps/sim/app/o/[organizationId]/home/organization-home.tsx
index aaee012dc96..8d4ae29eb82 100644
--- a/apps/sim/app/o/[organizationId]/home/organization-home.tsx
+++ b/apps/sim/app/o/[organizationId]/home/organization-home.tsx
@@ -17,9 +17,9 @@ interface OrganizationHomeProps {
 
 /** Search and private Assistant chats for the routed organization. */
 export function OrganizationHome(props: OrganizationHomeProps) {
-  const { searchAccess } = useOrganizationContext()
+  const { organization, searchAccess } = useOrganizationContext()
   if (!searchAccess.memberScoped) return null
-  return <OrganizationHomeContent {...props} />
+  return <OrganizationHomeContent key={`${organization.id}:${props.chatId ?? 'new'}`} {...props} />
 }
 
 function OrganizationHomeContent({ userName, chatId }: OrganizationHomeProps) {
@@ -82,7 +82,7 @@ function OrganizationHomeContent({ userName, chatId }: OrganizationHomeProps) {
           messages={chat.messages}
           isSending={chat.isSending}
           isReconnecting={chat.isReconnecting}
-          isLoading={Boolean(chatId) && chat.isChatHistoryPending}
+          isLoading={Boolean(chatId) && !chat.messages.length && chat.isChatHistoryPending}
           onSubmit={send}
           onStopGeneration={() => {
             void chat.stopGeneration()
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 12cf0cb09ad..a3ddd724773 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -41,6 +41,7 @@ import type {
 import { useFileAttachments } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks'
 import type { AttachedFile } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments'
 import { mentionifyIntegrations } from '@/blocks/integration-matcher'
+import { useChatInputFocus } from '@/hooks/use-chat-input-focus'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 import { type SpeechToTextError, useSpeechToText } from '@/hooks/use-speech-to-text'
 import { type DraftPayload, useMothershipDraftsStore } from '@/stores/mothership-drafts/store'
@@ -50,16 +51,6 @@ export type { FileAttachmentForApi } from '@/app/workspace/[workspaceId]/home/ty
 
 const logger = createLogger('UserInput')
 
-/**
- * Whether the element is somewhere the user could be typing. Focusing the composer on mount
- * must not steal focus from another field, but may take it from a link or button — opening a
- * chat leaves the sidebar link focused, and the composer should win.
- */
-function isTextEntry(element: HTMLElement): boolean {
-  const tag = element.tagName
-  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || element.isContentEditable
-}
-
 interface UserInputProps {
   defaultValue?: string
   draftScopeKey?: string
@@ -168,6 +159,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
   const editorRef = useRef(editor)
   editorRef.current = editor
   const textareaRef = editor.textareaRef
+  useChatInputFocus({ textareaRef })
 
   /**
    * Attaches context chips pushed from elsewhere in the app (browser/terminal
@@ -549,16 +541,6 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
     wasSendingRef.current = isSending
   }, [isSending, textareaRef])
 
-  useEffect(() => {
-    const raf = window.requestAnimationFrame(() => {
-      if (!document.hasFocus()) return
-      const active = document.activeElement
-      if (active instanceof HTMLElement && isTextEntry(active)) return
-      textareaRef.current?.focus()
-    })
-    return () => window.cancelAnimationFrame(raf)
-  }, [textareaRef])
-
   /**
    * Menu rows are excluded alongside buttons: the mode switcher's items are
    * portaled, so their clicks still bubble here through the React tree.
diff --git a/apps/sim/hooks/use-chat-input-focus.test.tsx b/apps/sim/hooks/use-chat-input-focus.test.tsx
new file mode 100644
index 00000000000..162944f05e7
--- /dev/null
+++ b/apps/sim/hooks/use-chat-input-focus.test.tsx
@@ -0,0 +1,108 @@
+/** @vitest-environment jsdom */
+import { act, useRef } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useChatInputFocus } from '@/hooks/use-chat-input-focus'
+
+function ChatInput() {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  useChatInputFocus({ textareaRef })
+  return <textarea ref={textareaRef} />
+}
+
+describe('useChatInputFocus', () => {
+  let container: HTMLDivElement
+  let root: Root
+  let activeWindow: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+    vi.useFakeTimers()
+    activeWindow = vi.spyOn(document, 'hasFocus').mockReturnValue(true)
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+    vi.restoreAllMocks()
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+  })
+
+  function flushFocus() {
+    act(() => vi.advanceTimersToNextFrame())
+  }
+
+  it('focuses the newly mounted composer after navigation from the sidebar', () => {
+    const link = document.createElement('a')
+    link.href = '#chat'
+    container.appendChild(link)
+    link.focus()
+    act(() => root.render(<ChatInput />))
+    flushFocus()
+    expect(document.activeElement).toBe(container.querySelector('textarea'))
+  })
+
+  it.each(['input', 'textarea', 'select', 'contenteditable'])(
+    'preserves focus in another %s',
+    (kind) => {
+      const field = document.createElement(kind === 'contenteditable' ? 'div' : kind)
+      if (kind === 'contenteditable') {
+        field.setAttribute('contenteditable', 'true')
+        field.tabIndex = 0
+        Object.defineProperty(field, 'isContentEditable', { value: true })
+      }
+      document.body.appendChild(field)
+      try {
+        act(() => root.render(<ChatInput />))
+        field.focus()
+        flushFocus()
+        expect(document.activeElement).toBe(field)
+      } finally {
+        field.remove()
+      }
+    }
+  )
+
+  it('does not focus a composer in an inactive window', () => {
+    activeWindow.mockReturnValue(false)
+    act(() => root.render(<ChatInput />))
+    flushFocus()
+    expect(document.activeElement).not.toBe(container.querySelector('textarea'))
+  })
+
+  it('does not refocus or move the caret on ordinary rerenders', () => {
+    act(() => root.render(<ChatInput />))
+    flushFocus()
+    const textarea = container.querySelector('textarea')!
+    textarea.value = 'Draft question'
+    textarea.setSelectionRange(2, 5)
+    const focus = vi.spyOn(textarea, 'focus')
+    act(() => root.render(<ChatInput />))
+    flushFocus()
+    expect(focus).not.toHaveBeenCalled()
+    expect([textarea.selectionStart, textarea.selectionEnd]).toEqual([2, 5])
+  })
+
+  it('cancels the previous composer focus during rapid chat switches', () => {
+    act(() => root.render(<ChatInput key='chat-a' />))
+    const previous = container.querySelector('textarea')!
+    const focus = vi.spyOn(previous, 'focus')
+    act(() => root.render(<ChatInput key='chat-b' />))
+    flushFocus()
+    expect(focus).not.toHaveBeenCalled()
+    expect(document.activeElement).toBe(container.querySelector('textarea'))
+    expect(document.activeElement).not.toBe(previous)
+  })
+
+  it('cancels focus when the composer unmounts before the frame', () => {
+    act(() => root.render(<ChatInput />))
+    const focus = vi.spyOn(container.querySelector('textarea')!, 'focus')
+    act(() => root.render(null))
+    flushFocus()
+    expect(focus).not.toHaveBeenCalled()
+  })
+})
diff --git a/apps/sim/hooks/use-chat-input-focus.ts b/apps/sim/hooks/use-chat-input-focus.ts
new file mode 100644
index 00000000000..2fa06500b68
--- /dev/null
+++ b/apps/sim/hooks/use-chat-input-focus.ts
@@ -0,0 +1,23 @@
+import { type RefObject, useEffect } from 'react'
+
+interface UseChatInputFocusProps {
+  textareaRef: RefObject<HTMLTextAreaElement | null>
+}
+
+/** Focuses a newly opened chat without interrupting typing elsewhere or an inactive window. */
+export function useChatInputFocus({ textareaRef }: UseChatInputFocusProps) {
+  useEffect(() => {
+    const frame = window.requestAnimationFrame(() => {
+      if (!document.hasFocus()) return
+      const active = document.activeElement
+      if (
+        active instanceof HTMLElement &&
+        (['INPUT', 'TEXTAREA', 'SELECT'].includes(active.tagName) || active.isContentEditable)
+      ) {
+        return
+      }
+      textareaRef.current?.focus()
+    })
+    return () => window.cancelAnimationFrame(frame)
+  }, [textareaRef])
+}

From ef1e6045d5bf35d2f1678b01af6c943cc4427d08 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Tue, 8 Sep 2026 23:40:33 -0700
Subject: [PATCH 2/3] fix(landing): stabilize mobile feature graphic sizing
 (#7649)

* fix(landing): stabilize mobile feature graphic sizing

* test(landing): cover uncapped graphic scaling
---
 .../responsive-design-stage.test.ts           |  37 ++++++
 .../file-library-graphic.module.css           |   9 +-
 .../interactive-library-folder.tsx            | 108 ++++++++++--------
 .../workflow-canvas-graphic.tsx               |  16 ++-
 4 files changed, 113 insertions(+), 57 deletions(-)

diff --git a/apps/sim/app/(landing)/components/shared/responsive-design-stage/responsive-design-stage.test.ts b/apps/sim/app/(landing)/components/shared/responsive-design-stage/responsive-design-stage.test.ts
index a17aaf1e831..2b749f2db55 100644
--- a/apps/sim/app/(landing)/components/shared/responsive-design-stage/responsive-design-stage.test.ts
+++ b/apps/sim/app/(landing)/components/shared/responsive-design-stage/responsive-design-stage.test.ts
@@ -114,6 +114,43 @@ describe('calculateFitScale', () => {
 })
 
 describe('ResponsiveDesignStage', () => {
+  it.each([
+    { width: 280, height: 400, supportsZoom: true },
+    { width: 280, height: 400, supportsZoom: false },
+    { width: 350, height: 340, supportsZoom: true },
+    { width: 350, height: 340, supportsZoom: false },
+  ])(
+    'fits an uncapped $width × $height stage with zoom support: $supportsZoom',
+    ({ width, height, supportsZoom }) => {
+      vi.stubGlobal('CSS', { supports: vi.fn(() => supportsZoom) })
+      act(() => {
+        root.render(
+          createElement(
+            ResponsiveDesignStage,
+            { width, height, maxScale: Number.POSITIVE_INFINITY },
+            createElement('span', null, 'Preview')
+          )
+        )
+      })
+
+      const surface = container.firstElementChild?.firstElementChild
+      if (!(surface instanceof HTMLElement) || !resizeObserver) {
+        throw new Error('responsive stage did not mount')
+      }
+      const observer = resizeObserver
+
+      act(() => observer.deliver(width * 2, height * 1.5))
+      expect(surface.style.zoom).toBe(supportsZoom ? '1.5' : '1')
+      expect(surface.style.transform).toBe(supportsZoom ? '' : 'scale(1.5)')
+      expect(surface.style.opacity).toBe('1')
+
+      act(() => observer.deliver(width / 2, height * 2))
+      expect(surface.style.zoom).toBe(supportsZoom ? '0.5' : '1')
+      expect(surface.style.transform).toBe(supportsZoom ? '' : 'scale(0.5)')
+      expect(surface.style.opacity).toBe('1')
+    }
+  )
+
   it('hides an already visible surface until a measurable size returns', () => {
     act(() => {
       root.render(
diff --git a/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css b/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css
index 1fe3f88e310..eb11c05760a 100644
--- a/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css
+++ b/apps/sim/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css
@@ -44,9 +44,9 @@
 
 .folderButton {
   position: relative;
-  min-width: 0;
-  min-height: 0;
-  container-type: size;
+  display: block;
+  width: 100%;
+  height: 100%;
   cursor: pointer;
   touch-action: manipulation;
   border-radius: 12px;
@@ -60,11 +60,10 @@
   width: 321px;
   height: 270px;
   left: 50%;
-  bottom: 12px;
+  bottom: 0;
   margin-left: -160.5px;
   perspective: 800px;
   transform-origin: bottom center;
-  scale: min(tan(atan2(100cqw, 350px)), tan(atan2(100cqh, 340px)));
 }
 .folderBack {
   position: absolute;
diff --git a/apps/sim/app/(landing)/files/components/feature-graphics/interactive-library-folder.tsx b/apps/sim/app/(landing)/files/components/feature-graphics/interactive-library-folder.tsx
index 0b423b59801..ad1d78fd5b5 100644
--- a/apps/sim/app/(landing)/files/components/feature-graphics/interactive-library-folder.tsx
+++ b/apps/sim/app/(landing)/files/components/feature-graphics/interactive-library-folder.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { cn } from '@sim/emcn'
 import { motion, useReducedMotion } from 'framer-motion'
+import { ResponsiveDesignStage } from '@/app/(landing)/components/shared/responsive-design-stage'
 import styles from '@/app/(landing)/files/components/feature-graphics/file-library-graphic.module.css'
 
 /**
@@ -72,53 +73,68 @@ export function InteractiveLibraryFolder({
     : { type: 'spring' as const, stiffness: 120, damping: 14 }
 
   return (
-    <button
-      type='button'
-      className={cn(styles.folderButton, className)}
-      aria-label={`${name}, ${count}`}
-      aria-pressed={open}
-      onPointerEnter={(event) => {
-        if (event.pointerType !== 'touch') setHovered(true)
-      }}
-      onPointerLeave={() => setHovered(false)}
-      onFocus={() => setHovered(true)}
-      onBlur={() => setHovered(false)}
-      onClick={() => setOpen((value) => !value)}
-      onKeyDown={(event) => {
-        if (event.key === 'Escape') setOpen(false)
-      }}
-    >
-      <span aria-hidden='true' className={styles.folderScene}>
-        <span className={styles.folderBack} />
-        {CARDS.map((card, index) => (
-          <motion.span
-            key={card.x}
-            className={styles.folderPaper}
-            animate={{
-              x: open ? card.openX : card.x,
-              y: open ? card.openY : hovered ? card.hoverY : card.y,
-              rotate: open ? card.openRotate : hovered ? card.hoverRotate : card.rotate,
-            }}
-            transition={{ ...transition, delay: reducedMotion ? 0 : (2 - index) * 0.05 }}
-          >
-            <span className={styles.paperTitle} />
-            <span className={styles.paperLines} />
-          </motion.span>
-        ))}
-        <motion.span
-          className={styles.folderFlap}
-          animate={{ rotateX: open ? -55 : hovered ? -45 : -15 }}
-          transition={transition}
+    <div className={cn('relative min-h-0 min-w-0', className)}>
+      <ResponsiveDesignStage
+        width={350}
+        height={340}
+        maxScale={Number.POSITIVE_INFINITY}
+        className='-translate-y-3 absolute inset-0 items-end overflow-visible [contain:none]'
+        contentClassName='origin-bottom'
+      >
+        <button
+          type='button'
+          className={styles.folderButton}
+          aria-label={`${name}, ${count}`}
+          aria-pressed={open}
+          onPointerEnter={(event) => {
+            if (event.pointerType !== 'touch') setHovered(true)
+          }}
+          onPointerLeave={() => setHovered(false)}
+          onFocus={() => setHovered(true)}
+          onBlur={() => setHovered(false)}
+          onClick={() => setOpen((value) => !value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') setOpen(false)
+          }}
         >
-          <svg className='absolute inset-0 size-full' viewBox='0 0 321 241' fill='none'>
-            <path d={FLAP_PATH} fill='var(--surface-3)' stroke='var(--border)' strokeWidth='2' />
-          </svg>
-          <span className={styles.folderLabel}>
-            <span>{name}</span>
-            <span>{count}</span>
+          <span aria-hidden='true' className={styles.folderScene}>
+            <span className={styles.folderBack} />
+            {CARDS.map((card, index) => (
+              <motion.span
+                key={card.x}
+                className={styles.folderPaper}
+                animate={{
+                  x: open ? card.openX : card.x,
+                  y: open ? card.openY : hovered ? card.hoverY : card.y,
+                  rotate: open ? card.openRotate : hovered ? card.hoverRotate : card.rotate,
+                }}
+                transition={{ ...transition, delay: reducedMotion ? 0 : (2 - index) * 0.05 }}
+              >
+                <span className={styles.paperTitle} />
+                <span className={styles.paperLines} />
+              </motion.span>
+            ))}
+            <motion.span
+              className={styles.folderFlap}
+              animate={{ rotateX: open ? -55 : hovered ? -45 : -15 }}
+              transition={transition}
+            >
+              <svg className='absolute inset-0 size-full' viewBox='0 0 321 241' fill='none'>
+                <path
+                  d={FLAP_PATH}
+                  fill='var(--surface-3)'
+                  stroke='var(--border)'
+                  strokeWidth='2'
+                />
+              </svg>
+              <span className={styles.folderLabel}>
+                <span>{name}</span>
+                <span>{count}</span>
+              </span>
+            </motion.span>
           </span>
-        </motion.span>
-      </span>
-    </button>
+        </button>
+      </ResponsiveDesignStage>
+    </div>
   )
 }
diff --git a/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx b/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx
index 8cb36e7b7b2..dcda47e3221 100644
--- a/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx
+++ b/apps/sim/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.tsx
@@ -1,5 +1,6 @@
 import { ChipTag, cn } from '@sim/emcn'
 import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
+import { ResponsiveDesignStage } from '@/app/(landing)/components/shared/responsive-design-stage'
 import { FeatureGraphicShell } from '@/app/(landing)/enterprise/components/feature-graphics'
 import styles from '@/app/(landing)/workflows/components/feature-graphics/workflow-canvas-graphic.module.css'
 
@@ -65,11 +66,14 @@ const EDGE_DRAW_CLASSES = [styles.edgeDraw0, styles.edgeDraw1, styles.edgeDraw2]
 export function WorkflowCanvasGraphic() {
   return (
     <FeatureGraphicShell variant='portrait'>
-      <div
-        aria-hidden='true'
-        className='absolute inset-0 flex items-center justify-center p-3 [container-type:size]'
-      >
-        <div className='relative h-[400px] w-[280px] shrink-0 [scale:min(tan(atan2(100cqw,280px)),tan(atan2(100cqh,400px)))]'>
+      <div aria-hidden='true' className='absolute inset-3'>
+        <ResponsiveDesignStage
+          width={LAYOUT.width}
+          height={LAYOUT.height}
+          maxScale={Number.POSITIVE_INFINITY}
+          className='h-full w-full'
+          contentClassName='relative'
+        >
           <svg
             className='absolute inset-0'
             fill='none'
@@ -139,7 +143,7 @@ export function WorkflowCanvasGraphic() {
               </span>
             </div>
           ))}
-        </div>
+        </ResponsiveDesignStage>
       </div>
     </FeatureGraphicShell>
   )

From 42b1bad01995c318e25f63955b2726d4bdd2730d Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Tue, 8 Sep 2026 23:40:46 -0700
Subject: [PATCH 3/3] improvement(docs): reduce search screenshot display sizes
 (#7648)

---
 apps/docs/content/docs/search/confluence.mdx         |  4 ++--
 .../content/docs/search/connect-your-account.mdx     |  4 ++--
 apps/docs/content/docs/search/github.mdx             |  8 ++++----
 apps/docs/content/docs/search/gitlab.mdx             |  6 +++---
 apps/docs/content/docs/search/gmail.mdx              |  4 ++--
 apps/docs/content/docs/search/google-calendar.mdx    |  4 ++--
 apps/docs/content/docs/search/google-drive.mdx       | 12 ++++++------
 apps/docs/content/docs/search/index.mdx              | 12 ++++++------
 apps/docs/content/docs/search/jira.mdx               |  6 +++---
 apps/docs/content/docs/search/slack.mdx              |  4 ++--
 10 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/apps/docs/content/docs/search/confluence.mdx b/apps/docs/content/docs/search/confluence.mdx
index 92ab84db517..79ea9ede7ba 100644
--- a/apps/docs/content/docs/search/confluence.mdx
+++ b/apps/docs/content/docs/search/confluence.mdx
@@ -58,7 +58,7 @@ Enter **Confluence Domain**, then choose one or more **Spaces**. The picker show
 
 Open **More options** to change **Content Type**, **Filter by Label**, or **Metadata tags**. The default includes pages; choose **All content** for pages and blog posts. Leave the label filter empty unless you want a smaller scope.
 
-<Image
+<Image className="mx-auto h-auto w-full max-w-md"
   src="/static/search/confluence-setup.jpg"
   alt="Confluence central source setup with an indexing account, domain, and spaces"
   width={520}
@@ -101,7 +101,7 @@ Have an Atlassian organization admin create a service account under **Directory
 
 Select the service account, then **Create credentials → API token → Next**. This is the credential type accepted by Sim's service-account form.
 
-<Image
+<Image className="mx-auto h-auto w-full max-w-xl"
   src="/static/credentials/atlassian/admin-auth-type-picker.png"
   alt="Atlassian Administration authentication selector with API token selected"
   width={1334}
diff --git a/apps/docs/content/docs/search/connect-your-account.mdx b/apps/docs/content/docs/search/connect-your-account.mdx
index 9ccaed82d0f..6d4281632f2 100644
--- a/apps/docs/content/docs/search/connect-your-account.mdx
+++ b/apps/docs/content/docs/search/connect-your-account.mdx
@@ -25,7 +25,7 @@ Open **Integrations** in the main sidebar, find the provider or source, and sele
 
 Use **Add source** beside **Add another [provider] source** when you need another supported repository, site, or project scope. Connecting an existing source does not ask you to configure it again.
 
-<Image src="/static/search/connect-account.png" alt="Organization Integrations showing approved providers and Connect account actions" width={738} height={680} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="/static/search/connect-account.png" alt="Organization Integrations showing approved providers and Connect account actions" width={738} height={680} />
 
 
 </Step>
@@ -37,7 +37,7 @@ In the new tab, select **Connect** and complete the provider's authorization. Ch
 
 Return to Integrations when the connection completes, or select **Return to Search** to open your organization’s Search page. Your account is saved when authorization completes; there is no separate submit step. If the popup was blocked or closed, allow popups and select **Connect account** again. While authorization is pending, use **Open again**.
 
-<Image src="/static/search/member-enrollment.jpg" alt="Gmail account connection with Connect and Return to Search actions" width={680} height={305} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="/static/search/member-enrollment.jpg" alt="Gmail account connection with Connect and Return to Search actions" width={680} height={305} />
 
 </Step>
 <Step>
diff --git a/apps/docs/content/docs/search/github.mdx b/apps/docs/content/docs/search/github.mdx
index a1ab75a3178..91ad9551e78 100644
--- a/apps/docs/content/docs/search/github.mdx
+++ b/apps/docs/content/docs/search/github.mdx
@@ -45,7 +45,7 @@ https://<your-sim-domain>/api/auth/oauth2/callback/github-repositories
 
 Authorization starts from Sim so the callback can finish the pending connection. The connector polls GitHub's API and does not need a webhook.
 
-<Image src="/static/search/github-app-callback.jpg" alt="GitHub App registration with the Redirect URI, expiring tokens enabled, and installation authorization, Device Flow, and webhooks disabled" width={768} height={929} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/github-app-callback.jpg" alt="GitHub App registration with the Redirect URI, expiring tokens enabled, and installation authorization, Device Flow, and webhooks disabled" width={768} height={929} />
 
 *Example registration. Replace `sim.example.com` with your Sim domain.*
 
@@ -56,11 +56,11 @@ Authorization starts from Sim so the callback can finish the pending connection.
 
 Expand **Permissions → Repository permissions**. Set **Contents → Access: Read-only**; leave the mandatory **Metadata** permission at **Read-only**.
 
-<Image src="/static/search/github-app-repository-permissions.jpg" alt="GitHub repository permissions with Contents set to Read-only and Metadata shown as mandatory Read-only" width={768} height={929} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/github-app-repository-permissions.jpg" alt="GitHub repository permissions with Contents set to Read-only and Metadata shown as mandatory Read-only" width={768} height={929} />
 
 Expand **Account permissions** and set **Email addresses → Access: Read-only**.
 
-<Image src="/static/search/github-app-email-permission.jpg" alt="GitHub account permissions with only Email addresses selected for Read-only access" width={768} height={929} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/github-app-email-permission.jpg" alt="GitHub account permissions with only Email addresses selected for Read-only access" width={768} height={929} />
 
 | Permission area | Permission | Access |
 |---|---|---|
@@ -111,7 +111,7 @@ As a Sim organization admin, open **Settings → Sources → Add integration** a
 
 Enter **Repository** as `owner/repo`. Open **More options** only if you need a different branch, path or extension filters, metadata tags, or a dedicated indexing account. **Sync documents with** defaults to **Connected members**.
 
-<Image src="/static/search/github-setup.jpg" alt="GitHub source setup with a required Repository field and More options" width={520} height={254} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/github-setup.jpg" alt="GitHub source setup with a required Repository field and More options" width={520} height={254} />
 
 | Field | What to enter |
 |---|---|
diff --git a/apps/docs/content/docs/search/gitlab.mdx b/apps/docs/content/docs/search/gitlab.mdx
index 36915257d21..c60636bfc24 100644
--- a/apps/docs/content/docs/search/gitlab.mdx
+++ b/apps/docs/content/docs/search/gitlab.mdx
@@ -9,7 +9,7 @@ import { Image } from '@/components/ui/image'
 
 GitLab Search uses an administrator connection to sync a project's content and permissions. Teammates do not connect individual GitLab accounts. They sign in to the Sim organization with a verified email matching their confirmed GitLab email.
 
-<Image src="/static/search/gitlab-setup.jpg" alt="GitLab source setup in Sim Search" width={520} height={479} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/gitlab-setup.jpg" alt="GitLab source setup in Sim Search" width={520} height={479} />
 
 Admin setup uses your organization's **Settings → Sources** page. Teammates do not need a personal GitLab connection. For workspace Search, use **Search → Add source** instead.
 
@@ -30,7 +30,7 @@ Use a self-managed GitLab instance running version **17.4 or later**. Setup need
 
 Sign in to your self-managed GitLab instance as an instance administrator, then open **Avatar → Edit profile → Access → Personal access tokens**. On current releases choose **Generate token → Legacy token**; older versions show **Add new token** or the token form directly.
 
-<Image src="https://handbook.gitlab.com/images/security/product-security/security-platforms-and-architecture/service-account-access-token-page.png" alt="Official GitLab example of the Access Tokens page with the Add new token button" width={1759} height={586} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="https://handbook.gitlab.com/images/security/product-security/security-platforms-and-architecture/service-account-access-token-page.png" alt="Official GitLab example of the Access Tokens page with the Add new token button" width={1759} height={586} />
 
 *Official [GitLab Handbook example](https://handbook.gitlab.com/handbook/security/product-security/security-platforms-architecture/product-security-engineering/runbooks/rotate-service-account-personal-access-tokens/). Navigation and button labels vary by version. The example's existing `api` tokens are unrelated to Sim; use the scopes below.*
 
@@ -63,7 +63,7 @@ Open **Settings → Sources → Add integration** and choose **GitLab**. On its
 
 **More options** contains the repository and issue filters, **Max Items**, and **Metadata tags**. Unlike member-account sources, GitLab retains this optional item limit.
 
-<Image src="/static/search/gitlab-options.jpg" alt="GitLab source setup with More options expanded for repository and issue filters, item limit, and metadata tags" width={520} height={625} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/gitlab-options.jpg" alt="GitLab source setup with More options expanded for repository and issue filters, item limit, and metadata tags" width={520} height={625} />
 
 Select **Connect & Sync**. Sim validates the token and source policy, then starts indexing.
 
diff --git a/apps/docs/content/docs/search/gmail.mdx b/apps/docs/content/docs/search/gmail.mdx
index 40c9b5955b0..e207ab493df 100644
--- a/apps/docs/content/docs/search/gmail.mdx
+++ b/apps/docs/content/docs/search/gmail.mdx
@@ -39,7 +39,7 @@ Click **Add source**. Gmail appears in the provider's **Sources** list. Each per
 </Step>
 </Steps>
 
-<Image src="/static/search/gmail-setup.jpg" alt="Gmail Search source configuration" width={520} height={329} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/gmail-setup.jpg" alt="Gmail Search source configuration" width={520} height={329} />
 
 ## Connect your account
 
@@ -93,7 +93,7 @@ Users do not need to create Google Cloud credentials. The deployment operator co
 https://<your-sim-domain>/api/auth/oauth2/callback/google-email
 ```
 
-<Image src="/static/search/google-oauth-web-client.png" alt="Google Cloud Web application client form with Sim's Gmail, Calendar, and Drive callback URLs" width={768} height={929} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/google-oauth-web-client.png" alt="Google Cloud Web application client form with Sim's Gmail, Calendar, and Drive callback URLs" width={768} height={929} />
 
 This Google Cloud example uses one client for all three services. Replace `https://sim.example.com` with your Sim origin and add only the callbacks for services you enable.
 
diff --git a/apps/docs/content/docs/search/google-calendar.mdx b/apps/docs/content/docs/search/google-calendar.mdx
index 1ac04bc23b1..661e972445e 100644
--- a/apps/docs/content/docs/search/google-calendar.mdx
+++ b/apps/docs/content/docs/search/google-calendar.mdx
@@ -41,7 +41,7 @@ Keep the default date range for the previous and next 30 days. **More options**
 </Step>
 </Steps>
 
-<Image src="/static/search/google-calendar-setup.jpg" alt="Google Calendar Search source configuration" width={520} height={397} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/google-calendar-setup.jpg" alt="Google Calendar Search source configuration" width={520} height={397} />
 
 <Callout type="info">
   `primary` means the connected person's main calendar. A calendar selected from the list is a specific calendar ID, even when it is your main calendar. That same ID applies to every member, and only members with access to it can search its events.
@@ -100,7 +100,7 @@ The deployment operator configures Google OAuth once; teammates then use the nor
 https://<your-sim-domain>/api/auth/oauth2/callback/google-calendar
 ```
 
-<Image src="/static/search/google-oauth-web-client.png" alt="Google Cloud Web application client form with Sim's Gmail, Calendar, and Drive callback URLs" width={768} height={929} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/google-oauth-web-client.png" alt="Google Cloud Web application client form with Sim's Gmail, Calendar, and Drive callback URLs" width={768} height={929} />
 
 This Google Cloud example uses one client for all three services. Replace `https://sim.example.com` with your Sim origin and add only the callbacks for services you enable.
 
diff --git a/apps/docs/content/docs/search/google-drive.mdx b/apps/docs/content/docs/search/google-drive.mdx
index 2e267fbc7f9..f7317aec464 100644
--- a/apps/docs/content/docs/search/google-drive.mdx
+++ b/apps/docs/content/docs/search/google-drive.mdx
@@ -56,7 +56,7 @@ Open **Settings → Sources → Google Drive → Sources → Add source**. This
 
 This requires a Google Workspace domain and a Workspace super administrator to authorize domain-wide delegation. Consumer Gmail accounts cannot use this path.
 
-<Image src="/static/search/google-drive-setup.jpg" alt="Google Drive central source setup with an indexing account, sharing policy, and folder scope" width={520} height={404} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/google-drive-setup.jpg" alt="Google Drive central source setup with an indexing account, sharing policy, and folder scope" width={520} height={404} />
 
 <Steps>
 <Step>
@@ -65,11 +65,11 @@ This requires a Google Workspace domain and a Workspace super administrator to a
 
 In [Google Cloud Console](https://console.cloud.google.com/), select your project and enable **Google Drive API** and **Admin SDK API** under **APIs & Services → Library**. Then open **IAM & Admin → Service Accounts → Create service account**, enter a name, and finish creation. Google Cloud project roles do not grant access to Workspace files; they are not required for this crawl.
 
-<Image src="/static/search/google-create-service-account.png" alt="Google Cloud Console form for creating a service account" width={1024} height={735} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="/static/search/google-create-service-account.png" alt="Google Cloud Console form for creating a service account" width={1024} height={735} />
 
 Open the service account's **Keys** tab and choose **Add key → Create new key → JSON**, then select **Create** to download the key. Store it securely; you will add it to Sim next. See [Google's key creation guide](https://docs.cloud.google.com/iam/docs/keys-create-delete#creating).
 
-<Image src="/static/search/google-create-private-key.png" alt="Google Cloud Create private key dialog with JSON selected" width={1024} height={502} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="/static/search/google-create-private-key.png" alt="Google Cloud Create private key dialog with JSON selected" width={1024} height={502} />
 
 </Step>
 <Step>
@@ -78,7 +78,7 @@ Open the service account's **Keys** tab and choose **Add key → Create new key
 
 In the service account's **Details**, expand **Advanced settings** and copy its numeric **Client ID**. Sign in to the [Workspace Admin Console](https://admin.google.com/ac/owl/domainwidedelegation) as a super administrator. Open **Security → Access and data control → API controls → Manage Domain Wide Delegation → Add new**.
 
-<Image src="/static/search/google-domain-delegation.png" alt="Google Workspace Admin Console Add a new client ID dialog with Client ID and OAuth scopes fields" width={768} height={929} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/google-domain-delegation.png" alt="Google Workspace Admin Console Add a new client ID dialog with Client ID and OAuth scopes fields" width={768} height={929} />
 
 Paste that Client ID into **Client ID**, then enter these exact scopes as a comma-separated list under **OAuth scopes**:
 
@@ -97,7 +97,7 @@ These are Search's central crawl scopes. The general [Google service account gui
 
 Under **Indexing account**, choose the service-account connection action, or select an existing service account. Paste the JSON key into **Add Google Service Account**, give it a name, and add it. Sim returns you to the source form with that credential selected.
 
-<Image src="/static/search/google-service-account.jpg" alt="Add Google Service Account credential modal in Sim" width={520} height={562} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/google-service-account.jpg" alt="Add Google Service Account credential modal in Sim" width={520} height={562} />
 
 </Step>
 <Step>
@@ -146,7 +146,7 @@ The deployment operator configures Google OAuth for member accounts and **Accoun
 https://<your-sim-domain>/api/auth/oauth2/callback/google-drive
 ```
 
-<Image src="/static/search/google-oauth-web-client.png" alt="Google Cloud Web application client form with Sim's Gmail, Calendar, and Drive callback URLs" width={768} height={929} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/google-oauth-web-client.png" alt="Google Cloud Web application client form with Sim's Gmail, Calendar, and Drive callback URLs" width={768} height={929} />
 
 This Google Cloud example uses one client for all three services. Replace `https://sim.example.com` with your Sim origin and add only the callbacks for services you enable.
 
diff --git a/apps/docs/content/docs/search/index.mdx b/apps/docs/content/docs/search/index.mdx
index 1b45c074528..907ea2876d3 100644
--- a/apps/docs/content/docs/search/index.mdx
+++ b/apps/docs/content/docs/search/index.mdx
@@ -39,7 +39,7 @@ Open **Integrations** in the main sidebar and select **Connect account** if prom
 </Step>
 </Steps>
 
-<Image src="/static/search/add-source.jpg" alt="Organization Sources settings with the Add integration action" width={738} height={720} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="/static/search/add-source.jpg" alt="Organization Sources settings with the Add integration action" width={738} height={720} />
 
 Source availability depends on the deployment and organization policy. An unavailable source needs operator configuration before setup can continue.
 
@@ -84,13 +84,13 @@ These requests are separate from organization invitations. They let recipients c
 
 **Revoke all account access** withdraws every account that person contributed to the organization, including other providers. It does not remove their organization membership.
 
-<Image src="/static/search/request-connections.jpg" alt="Request Gmail connections with an Emails field and Send requests action" width={520} height={290} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/request-connections.jpg" alt="Request Gmail connections with an Emails field and Send requests action" width={520} height={290} />
 
 ## Manage sources and documents
 
 Open **Settings → Sources → [integration]**, then select a source. Providers with personal connections have **Sources** and **Accounts** tabs; providers such as GitLab open directly to the source list. Multiple sources can have different folder, repository, space, or project scopes.
 
-<Image src="/static/search/integration-provider.jpg" alt="Integration detail with Sources and Accounts tabs and a nested source list" width={738} height={390} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="/static/search/integration-provider.jpg" alt="Integration detail with Sources and Accounts tabs and a nested source list" width={738} height={390} />
 
 | Source tab | What you can do |
 | --- | --- |
@@ -100,9 +100,9 @@ Open **Settings → Sources → [integration]**, then select a source. Providers
 
 Use the source header to sync, pause, resume, or remove that source. The back link returns to its integration. **Deactivate** on the integration page makes its content unavailable in Search, Assistant, and MCP while preserving its sources and connected accounts; **Activate** enables it again.
 
-<Image src="/static/search/source-settings.jpg" alt="Gmail source Settings tab with label, date range, and search filters" width={1022} height={680} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="/static/search/source-settings.jpg" alt="Gmail source Settings tab with label, date range, and search filters" width={1022} height={680} />
 
-<Image src="/static/search/source-sync-history.jpg" alt="Source Sync history with no connected accounts or synced members" width={1022} height={430} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="/static/search/source-sync-history.jpg" alt="Source Sync history with no connected accounts or synced members" width={1022} height={430} />
 
 ## Search, Assistant, and MCP
 
@@ -141,7 +141,7 @@ A completed sync means the source was checked; some documents may still be index
 
 As an admin, open **Settings → Sources → [integration] → Sources → [source]**. In **Documents**, select **Failed** from the status dropdown to inspect those files. Use the search field to find a document by name. Select **Retry indexing** beside a file to try again. **Exclude** removes a file from search; select **Excluded** and then **Restore** to include it again. Fix a disconnected account or source configuration before retrying a sync that needs attention.
 
-<Image src="/static/search/source-documents.jpg" alt="Empty source Documents tab with search and an Included status filter" width={1022} height={430} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="/static/search/source-documents.jpg" alt="Empty source Documents tab with search and an Included status filter" width={1022} height={430} />
 
 Temporary indexing-capacity waits retry automatically in the background. If automatic retries are exhausted, the document appears as failed so an admin can retry it. Other searchable documents remain available while this work finishes.
 
diff --git a/apps/docs/content/docs/search/jira.mdx b/apps/docs/content/docs/search/jira.mdx
index 21c421fe5c2..c15fa80f975 100644
--- a/apps/docs/content/docs/search/jira.mdx
+++ b/apps/docs/content/docs/search/jira.mdx
@@ -45,7 +45,7 @@ If you already know the project keys, use the switch beside **Projects** to sele
 
 **Account for browsing** only populates the project picker. It does not enroll you or share that account's issue access with teammates.
 
-<Image
+<Image className="mx-auto h-auto w-full max-w-md"
   src="/static/search/jira-setup.jpg"
   alt="Jira source setup with an account for browsing and required site and project fields"
   width={520}
@@ -110,7 +110,7 @@ First, open a missing issue in Jira using the same account you connected to Sim.
 
 For company-managed projects, an admin can open **Settings → System → Admin Helper → Permission Helper**, enter the affected user and issue key, and check **Browse Projects**. The result explains which permission condition failed. Fix access in Jira, then let the next Sim sync finish. See Atlassian's [Permission Helper instructions](https://support.atlassian.com/jira-cloud-administration/docs/check-a-users-access-from-a-work-item/) and [illustrated permissions tutorial](https://www.atlassian.com/software/jira/guides/permissions/tutorials).
 
-<Image
+<Image className="mx-auto h-auto w-full max-w-xl"
   src="https://dam-cdn.atl.orangelogic.com/AssetLink/3ud2hh403t5og84cwcs2kp38cd6dn0d3.png"
   alt="Atlassian illustration of Jira's Permission helper with User and Issue fields and Browse Projects selected"
   width={2880}
@@ -127,7 +127,7 @@ The deployment operator configures one shared Jira OAuth integration. Teammates
 1. Open the [Atlassian developer console](https://developer.atlassian.com/console/myapps/) and select your deployment's **OAuth 2.0 integration**, or create one for the deployment.
 2. Under **Authorization**, configure **OAuth 2.0 (3LO)**. Add `https://<your-sim-domain>/api/auth/oauth2/callback/jira` to **Callback URLs**, keeping any callbacks already used by your deployment, then save.
 
-   <Image
+   <Image className="mx-auto h-auto w-full max-w-md"
      src="/static/search/atlassian-oauth-callback.png"
      alt="Atlassian OAuth Authorization form with an example Sim Jira callback URL"
      width={768}
diff --git a/apps/docs/content/docs/search/slack.mdx b/apps/docs/content/docs/search/slack.mdx
index a4bf04de7ac..6b9a314dccc 100644
--- a/apps/docs/content/docs/search/slack.mdx
+++ b/apps/docs/content/docs/search/slack.mdx
@@ -8,7 +8,7 @@ import { Image } from '@/components/ui/image'
 
 Slack Search indexes channel messages and threads. A Sim organization admin configures your Slack app once, then each teammate authorizes their own Slack account. Their results are limited to the selected public channels and private channels they can access. DMs and group DMs are not indexed.
 
-<Image src="/static/search/slack-setup.jpg" alt="Slack app setup for Sim Search with application and client credential fields" width={520} height={502} />
+<Image className="mx-auto h-auto w-full max-w-md" src="/static/search/slack-setup.jpg" alt="Slack app setup for Sim Search with application and client credential fields" width={520} height={502} />
 
 ## Before you start
 
@@ -34,7 +34,7 @@ Open **Settings → Sources → Add integration** and choose **Slack**. Select *
 
 On the [Slack Apps page](https://api.slack.com/apps), create an app for the target workspace, or use an app dedicated to your Sim organization. Under **OAuth & Permissions**, add the user scopes and both redirect URLs listed below. Keep **Token Rotation** disabled.
 
-<Image src="https://docs.slack.dev/assets/images/basic-information-page-e7d531fe4721830376d61a91de5d933e.png" alt="Slack app settings showing Basic Information and App Credentials" width={2692} height={1538} />
+<Image className="mx-auto h-auto w-full max-w-xl" src="https://docs.slack.dev/assets/images/basic-information-page-e7d531fe4721830376d61a91de5d933e.png" alt="Slack app settings showing Basic Information and App Credentials" width={2692} height={1538} />
 
 *Official Slack example: [Basic Information](https://docs.slack.dev/tools/bolt-python/creating-an-app/#create-a-new-app). Use your own app's credentials.*