From 7e299251e4cb6e55e28963c8287444b60186da11 Mon Sep 17 00:00:00 2001
From: Paul Lizer <paullizer@microsoft.com>
Date: Sun, 11 Oct 2026 11:33:41 -0400
Subject: [PATCH 1/2] Improve responsive V2 mobile navigation, chat, and
 documents

Reuse existing components with header-based mobile navigation, expandable workspace and chat controls, and readable document rows. Preserve desktop preferences and add responsive regression coverage and documentation.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 application/single_app/config.py              |   2 +-
 application/v2_ui/index.html                  |   2 +-
 .../v2_ui/src/components/chat/Composer.tsx    |  18 ++-
 .../src/components/chat/ComposerHighlight.tsx |   2 +-
 .../components/documents/DocumentTable.tsx    |  27 +++--
 .../documents/ExplorerCommandBar.tsx          |  17 ++-
 .../v2_ui/src/components/layout/AppShell.tsx  |  62 ++++++----
 .../components/layout/MobileNavigation.tsx    |  36 ++++++
 .../src/components/layout/PageHeader.tsx      |   8 +-
 .../v2_ui/src/components/layout/Sidebar.tsx   |  39 ++++--
 .../workspace/GroupWorkspacePicker.tsx        |  11 +-
 .../workspace/PublicWorkspacePicker.tsx       |  11 +-
 .../components/workspace/WorkspaceShell.tsx   |  51 ++++++--
 application/v2_ui/src/pages/ChatPage.tsx      |  37 +++++-
 .../v2_ui/src/pages/GroupWorkspacePage.tsx    |   2 +-
 .../v2_ui/src/pages/PublicWorkspacePage.tsx   |   2 +-
 application/v2_ui/src/styles/theme.css        | 101 ++++++++++++++++
 docs/explanation/features/REACT_V2_UI.md      |  16 ++-
 .../features/V2_DOCUMENTS_EXPLORER.md         |  14 +++
 docs/explanation/features/V2_MY_WORKSPACE.md  |   8 ++
 .../explanation/fixes/V2_MOBILE_LAYOUT_FIX.md |  65 ++++++++++
 docs/guides/v2-mobile.md                      |  58 +++++++++
 docs/reference/chat-controls.md               |  27 +++--
 .../test_v2_documents_explorer.py             |   4 +-
 functional_tests/test_v2_mobile_layout.py     |  73 +++++++++++
 ui_tests/test_v2_group_classic_handoffs.py    |   5 +-
 ui_tests/test_v2_group_journeys.py            |   5 +-
 ui_tests/test_v2_group_workspace_shell.py     |   5 +-
 ui_tests/test_v2_mobile_chat_layout.py        | 113 ++++++++++++++++++
 ui_tests/test_v2_mobile_navigation.py         |  78 ++++++++++++
 .../test_v2_mobile_workspace_documents.py     |  91 ++++++++++++++
 .../test_v2_orchestration_planning_retry.py   |  25 ++--
 ui_tests/test_v2_public_journeys.py           |   5 +-
 ...est_v2_shared_workspace_overview_counts.py |   5 +-
 .../test_v2_sidebar_conversation_scroll.py    |  19 ++-
 35 files changed, 938 insertions(+), 106 deletions(-)
 create mode 100644 application/v2_ui/src/components/layout/MobileNavigation.tsx
 create mode 100644 docs/explanation/fixes/V2_MOBILE_LAYOUT_FIX.md
 create mode 100644 docs/guides/v2-mobile.md
 create mode 100644 functional_tests/test_v2_mobile_layout.py
 create mode 100644 ui_tests/test_v2_mobile_chat_layout.py
 create mode 100644 ui_tests/test_v2_mobile_navigation.py
 create mode 100644 ui_tests/test_v2_mobile_workspace_documents.py

diff --git a/application/single_app/config.py b/application/single_app/config.py
index 06163df45..d18d6d66e 100644
--- a/application/single_app/config.py
+++ b/application/single_app/config.py
@@ -101,7 +101,7 @@
 EXECUTOR_TYPE = 'thread'
 EXECUTOR_MAX_WORKERS = 30
 SESSION_TYPE = 'filesystem'
-VERSION = "0.261.322"
+VERSION = "0.261.323"
 IS_DEVELOPMENT = is_development_env_enabled()
 
 # Opt-out for deployments where App Service Easy Auth is active but the platform
diff --git a/application/v2_ui/index.html b/application/v2_ui/index.html
index 7529b8994..81d2bdcf7 100644
--- a/application/v2_ui/index.html
+++ b/application/v2_ui/index.html
@@ -2,7 +2,7 @@
 <html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon" />
     <title>SimpleChat</title>
     <script>
diff --git a/application/v2_ui/src/components/chat/Composer.tsx b/application/v2_ui/src/components/chat/Composer.tsx
index 8cc1cd0bb..19ae13a2e 100644
--- a/application/v2_ui/src/components/chat/Composer.tsx
+++ b/application/v2_ui/src/components/chat/Composer.tsx
@@ -20,6 +20,7 @@ import {
     Reply,
     Search,
     ShieldCheck,
+    SlidersHorizontal,
     Square,
     Telescope,
     Workflow,
@@ -170,6 +171,7 @@ function ToolToggle({
 }
 
 export function Composer({ initialAgentSelection }: { initialAgentSelection?: string } = {}) {
+    const [mobileToolsOpen, setMobileToolsOpen] = useState(false);
     const publicWorkspaceSelection = useChatStore((state) => state.publicWorkspaceSelection);
     const setPublicWorkspaceSelection = useChatStore((state) => state.setPublicWorkspaceSelection);
     const publicLabels = usePublicWorkspaceLabels();
@@ -1527,7 +1529,7 @@ export function Composer({ initialAgentSelection }: { initialAgentSelection?: st
     };
 
     return (
-        <div className="shrink-0 px-4 pb-4">
+        <div className="chat-composer shrink-0 px-2 pb-2 md:px-4 md:pb-4">
             {largeRun && (
                 <LargeRunDialog
                     estimate={largeRun.estimate}
@@ -1797,6 +1799,17 @@ export function Composer({ initialAgentSelection }: { initialAgentSelection?: st
                     )}
 
                     <div className="flex flex-wrap items-center gap-1.5 px-1 pt-1" data-tour="composer-tools">
+                        <button type="button" aria-label="Chat tools" aria-expanded={mobileToolsOpen}
+                            aria-controls="composer-secondary-tools"
+                            onClick={() => setMobileToolsOpen((open) => !open)}
+                            className="mobile-tools-toggle flex min-h-11 min-w-0 items-center gap-2 rounded-xl px-2 text-sm text-text-2 hover:bg-surface-2 md:hidden">
+                            <SlidersHorizontal size={18} className="shrink-0" />
+                            <span className="min-w-0 truncate">{orchestrating
+                                ? `Orchestrate · ${effectiveApprovalMode}`
+                                : activeAgentLabel || modelOptions.find((model) => model.value === options.modelDeployment)?.label || 'Tools'}</span>
+                        </button>
+                        <div id="composer-secondary-tools" data-open={mobileToolsOpen}
+                            className="composer-secondary-tools flex flex-wrap items-center gap-1.5 md:contents">
                         {orchestrationAvailable && (
                             <ToolToggle
                                 active={orchestrating}
@@ -2044,7 +2057,8 @@ export function Composer({ initialAgentSelection }: { initialAgentSelection?: st
                             </>
                         )}
 
-                        <div className="ml-auto flex items-center gap-1.5">
+                        </div>
+                        <div className="composer-primary-actions ml-auto flex shrink-0 items-center gap-1.5">
                             {features.enable_speech_to_text_input && (
                                 <VoiceInput
                                     onTranscribed={(transcript) =>
diff --git a/application/v2_ui/src/components/chat/ComposerHighlight.tsx b/application/v2_ui/src/components/chat/ComposerHighlight.tsx
index 215cb2b01..2736e53ac 100644
--- a/application/v2_ui/src/components/chat/ComposerHighlight.tsx
+++ b/application/v2_ui/src/components/chat/ComposerHighlight.tsx
@@ -26,7 +26,7 @@ import { parseContextTokens } from '../../lib/chatContextTokens';
  * defect this constant exists to prevent.
  */
 export const COMPOSER_TEXT_CLASS =
-    'w-full px-3 py-2.5 text-[15px] leading-relaxed whitespace-pre-wrap break-words';
+    'w-full px-3 py-2.5 text-base md:text-[15px] leading-relaxed whitespace-pre-wrap break-words';
 
 /**
  * Caret and selection have to be set explicitly once the text is transparent.
diff --git a/application/v2_ui/src/components/documents/DocumentTable.tsx b/application/v2_ui/src/components/documents/DocumentTable.tsx
index 237564e9e..1de53add8 100644
--- a/application/v2_ui/src/components/documents/DocumentTable.tsx
+++ b/application/v2_ui/src/components/documents/DocumentTable.tsx
@@ -12,7 +12,8 @@
 // `MSA_v2_FINAL(3).docx`, so the extracted title leads and the file name sits under it. When
 // there is no title the file name is promoted rather than captioned with "Untitled".
 
-import { useEffect, useRef } from 'react';
+import { useContext, useEffect, useRef } from 'react';
+import { MobileNavigationContext } from '../layout/MobileNavigation';
 import { clsx } from 'clsx';
 import { ArrowDown, ArrowUp, ChevronsUpDown, Users } from 'lucide-react';
 import { groupDocumentOrigin, type DocumentReadScope } from '../../lib/documentReadAdapter';
@@ -124,7 +125,8 @@ export function DocumentTable({
     canReview?: (document: WorkspaceDocument) => boolean;
     onReview?: (document: WorkspaceDocument) => void;
 }) {
-    const activeColumns = DOCUMENT_COLUMNS.filter((column) => columns.includes(column.id));
+    const { mobile } = useContext(MobileNavigationContext);
+    const activeColumns = DOCUMENT_COLUMNS.filter((column) => mobile ? column.id === 'name' : columns.includes(column.id));
     const selectedIds = new Set(selection.ids);
     const selectable = documents.filter((document) => !selectionReason(document));
     const allSelected = selectable.length > 0 && selectable.every((item) => selectedIds.has(documentId(item)));
@@ -140,7 +142,7 @@ export function DocumentTable({
     }, [someSelected]);
 
     return (
-        <table className="w-full min-w-[42rem] border-collapse text-sm">
+        <table className="document-table w-full border-collapse text-sm md:min-w-[42rem]">
             <thead className="sticky top-0 z-10 bg-surface-1">
                 <tr className="border-b border-edge text-left">
                     <th scope="col" className="w-9 px-2 py-2">
@@ -228,6 +230,8 @@ export function DocumentTable({
                             )}
                         >
                             <td className="px-2 py-2 align-middle">
+                                <label className="flex min-h-11 items-center justify-center md:min-h-0"
+                                    onClick={(event) => event.stopPropagation()}>
                                 <input
                                     type="checkbox"
                                     checked={selected}
@@ -244,13 +248,14 @@ export function DocumentTable({
                                     }
                                     aria-label={`Select ${primary}`}
                                     className={clsx(
-                                        'h-3.5 w-3.5 cursor-pointer accent-[var(--accent)]',
+                                        'h-5 w-5 cursor-pointer accent-[var(--accent)] md:h-3.5 md:w-3.5',
                                         // Hidden until useful, like Explorer, but never
                                         // removed: it stays reachable by keyboard.
-                                        !selected &&
+                                        !mobile && !selected &&
                                             'opacity-0 group-hover:opacity-100 focus:opacity-100',
                                     )}
                                 />
+                                </label>
                             </td>
 
                             {activeColumns.map((column) => {
@@ -260,10 +265,10 @@ export function DocumentTable({
                                             <td key={column.id} className="px-2 py-1.5">
                                                 <div className="flex min-w-0 items-center gap-2">
                                                     <DocumentIcon document={document} />
-                                                    <div className="min-w-0">
+                                                    <div className="min-w-0 flex-1">
                                                         <button
                                                             type="button"
-                                                            className="max-w-full truncate text-left text-text-1 hover:underline"
+                                                            className="max-w-full text-left text-text-1 hover:underline max-md:min-h-11 max-md:break-words md:truncate"
                                                             aria-label={`Details for ${primary}`}
                                                             onClick={(event) => {
                                                                 event.stopPropagation();
@@ -273,10 +278,16 @@ export function DocumentTable({
                                                             {primary}
                                                         </button>
                                                         {secondary ? (
-                                                            <div className="truncate text-xs text-text-3">
+                                                            <div className="break-words text-xs text-text-3 md:truncate">
                                                                 {secondary}
                                                             </div>
                                                         ) : null}
+                                                        {mobile && <div className="mt-1 flex flex-wrap gap-1">
+                                                            <DocumentStatusBadge document={document} />
+                                                            {classification && <ClassificationBadge classification={classification}
+                                                                color={classificationColors[classification]} />}
+                                                            {blockedReason && <span className="text-xs text-text-3">{blockedReason}</span>}
+                                                        </div>}
                                                         {scope.kind === 'group' ? (
                                                             <div className="text-[11px] text-text-3">
                                                                 {groupDocumentOrigin(document, scope.id)}
diff --git a/application/v2_ui/src/components/documents/ExplorerCommandBar.tsx b/application/v2_ui/src/components/documents/ExplorerCommandBar.tsx
index 13c964a78..fb848d5d8 100644
--- a/application/v2_ui/src/components/documents/ExplorerCommandBar.tsx
+++ b/application/v2_ui/src/components/documents/ExplorerCommandBar.tsx
@@ -11,6 +11,7 @@
 // nothing selected rather than hidden, so the bar keeps its shape and the capability stays
 // discoverable.
 
+import { useState } from 'react';
 import { clsx } from 'clsx';
 import {
     ArrowDown,
@@ -103,6 +104,7 @@ export function ExplorerCommandBar({
     onSort: (field: DocumentSortField) => void;
     onShowFilters?: () => void;
 }) {
+    const [viewOptionsOpen, setViewOptionsOpen] = useState(false);
     const hasSelection = selectionCount > 0;
     const canReview = Boolean(onReview && selectedDocuments.length === 1 && availability.canReview?.(selectedDocuments[0]));
     const compactActions = Boolean(onShowFilters && (
@@ -119,7 +121,7 @@ export function ExplorerCommandBar({
     ].filter((action) => action.visible);
 
     return (
-        <div className="flex flex-wrap items-center gap-2 border-b border-edge px-1 pb-2">
+        <div className="explorer-command-bar flex flex-wrap items-center gap-2 border-b border-edge px-1 pb-2">
             {availability.upload ? (
                 <>
                     <GlassButton variant="primary" size="sm" onClick={onUpload} disabled={uploading || !availability.allows('upload')}>
@@ -238,8 +240,18 @@ export function ExplorerCommandBar({
                         className="h-8 w-full rounded-lg border border-edge bg-surface-1 pr-2 pl-7 text-sm text-text-1 placeholder:text-text-3 focus:border-accent focus:outline-none"
                     />
                     </div>
+                    <button type="button" aria-label="Document view options"
+                        aria-expanded={viewOptionsOpen} aria-controls="document-view-options"
+                        onClick={() => setViewOptionsOpen((open) => !open)}
+                        className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg border border-edge bg-surface-1 text-text-2 md:hidden">
+                        <Columns3 size={16} />
+                    </button>
                 </div>
 
+                <div id="document-view-options" className={clsx(
+                    'min-w-0 flex-wrap items-center gap-2 md:contents',
+                    viewOptionsOpen ? 'flex' : 'hidden',
+                )}>
                 {canSaveView ? (
                     <GlassButton
                         variant="ghost"
@@ -340,6 +352,7 @@ export function ExplorerCommandBar({
                 >
                     <PanelRight size={15} />
                 </button>
+                </div>
             </div>
         </div>
     );
@@ -446,7 +459,7 @@ export function ExplorerStatusBar({
     const items = paginationItems(page, range.pageCount);
 
     return (
-        <div className="flex flex-wrap items-center justify-between gap-2 border-t border-edge px-1 pt-2 text-xs text-text-3">
+        <div className="explorer-status-bar flex flex-wrap items-center justify-between gap-2 border-t border-edge px-1 pt-2 text-xs text-text-3">
             <p>
                 {range.total === 0
                     ? 'No documents'
diff --git a/application/v2_ui/src/components/layout/AppShell.tsx b/application/v2_ui/src/components/layout/AppShell.tsx
index 2aba188fb..4475a065e 100644
--- a/application/v2_ui/src/components/layout/AppShell.tsx
+++ b/application/v2_ui/src/components/layout/AppShell.tsx
@@ -1,13 +1,13 @@
 // AppShell.tsx
-// Two-column application frame: the collapsible rail on the left, all content on the
-// right. The classification banner, when configured, is the only element allowed to span
-// the full width, matching the server-rendered interface.
+// Desktop rail and content frame, with a shared header/drawer on phones.
+// The classification banner spans the frame, matching the server-rendered interface.
 //
 // The banner carries the same `classification-banner` id the classic layout uses, so a
 // deployment styling or asserting against it does not have to know which interface it is
 // looking at.
 
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { MobileNavigation, MobileNavigationContext } from './MobileNavigation';
 import { Sidebar } from './Sidebar';
 import { Toaster } from '../ui/Toaster';
 import { SafetyWarningDialogHost } from '../notifications/SafetyWarningDialog';
@@ -28,7 +28,7 @@ function ClassificationBanner() {
         <div
             id="classification-banner"
             role="note"
-            className="flex h-8 shrink-0 items-center justify-center text-sm font-bold tracking-wide"
+            className="flex min-h-8 shrink-0 items-center justify-center px-3 py-1 text-center text-sm font-bold tracking-wide break-words"
             style={{ background: banner.color, color: banner.text_color }}
         >
             {banner.text}
@@ -42,6 +42,9 @@ export function AppShell({ children }: { children: ReactNode }) {
     const setMobileNavOpen = useUiStore((state) => state.setMobileNavOpen);
     const participantsOpen = useCollaborationStore((state) => state.panelTarget !== null);
     const contentRef = useRef<HTMLElement>(null);
+    const [headerCount, setHeaderCount] = useState(0);
+    const register = useCallback((change: number) => setHeaderCount((count) => count + change), []);
+    const title = useBootstrapStore((state) => state.data?.branding?.app_title || 'SimpleChat');
 
     useEffect(() => {
         const query = window.matchMedia('(max-width: 767px)');
@@ -63,26 +66,35 @@ export function AppShell({ children }: { children: ReactNode }) {
     }, [mobileNavOpen, participantsOpen, setMobileNavOpen]);
 
     return (
-        <div className="flex h-full flex-col">
-            <ClassificationBanner />
-            <div className="relative flex min-h-0 min-w-0 flex-1">
-                {mobile && <div className="w-[68px] shrink-0" aria-hidden="true" />}
-                {mobile && mobileNavOpen && (
-                    <button
-                        type="button"
-                        tabIndex={-1}
-                        aria-label="Close navigation"
-                        className="absolute inset-0 z-40 bg-black/40"
-                        onClick={() => setMobileNavOpen(false)}
-                    />
-                )}
-                <Sidebar mobile={mobile} />
-                <main ref={contentRef} className="flex min-w-0 flex-1 flex-col">{children}</main>
-            </div>
-            <Toaster />
-            <WorkflowAlertCardHost />
-            <WorkflowAlertLiveRegion />
-            <SafetyWarningDialogHost />
+        <MobileNavigationContext.Provider value={{ mobile, register }}>
+            <div className="app-shell flex h-full min-h-0 flex-col">
+                    <ClassificationBanner />
+                    <div className="relative flex min-h-0 min-w-0 flex-1">
+                        {mobile && mobileNavOpen && (
+                            <button
+                                type="button"
+                                tabIndex={-1}
+                                aria-label="Close navigation"
+                                className="absolute inset-0 z-40 bg-black/40"
+                                onClick={() => setMobileNavOpen(false)}
+                            />
+                        )}
+                        {(!mobile || mobileNavOpen) && <Sidebar mobile={mobile} />}
+                        <main ref={contentRef} className="flex min-h-0 min-w-0 flex-1 flex-col">
+                            {mobile && headerCount === 0 && (
+                                <header className="glass flex min-h-14 shrink-0 items-center gap-2 px-2">
+                                    <MobileNavigation register={false} />
+                                    <span className="truncate text-sm font-semibold">{title}</span>
+                                </header>
+                            )}
+                            {children}
+                        </main>
+                    </div>
+                    <Toaster />
+                    <WorkflowAlertCardHost />
+                    <WorkflowAlertLiveRegion />
+                    <SafetyWarningDialogHost />
         </div>
+        </MobileNavigationContext.Provider>
     );
 }
diff --git a/application/v2_ui/src/components/layout/MobileNavigation.tsx b/application/v2_ui/src/components/layout/MobileNavigation.tsx
new file mode 100644
index 000000000..c4cb57360
--- /dev/null
+++ b/application/v2_ui/src/components/layout/MobileNavigation.tsx
@@ -0,0 +1,36 @@
+// MobileNavigation.tsx
+
+import { createContext, useContext, useLayoutEffect } from 'react';
+import { Menu } from 'lucide-react';
+import { useUiStore } from '../../stores/uiStore';
+import { NotificationBell } from './NotificationBell';
+
+export const MobileNavigationContext = createContext({
+    mobile: false,
+    register: (_change: number) => {},
+});
+
+export function MobileNavigation({ register = true }: { register?: boolean }) {
+    const context = useContext(MobileNavigationContext);
+    const open = useUiStore((state) => state.mobileNavOpen);
+    const setOpen = useUiStore((state) => state.setMobileNavOpen);
+
+    useLayoutEffect(() => {
+        if (!register) return;
+        context.register(1);
+        return () => context.register(-1);
+    }, [register, context.register]);
+
+    if (!context.mobile) return null;
+
+    return (
+        <div className="mobile-navigation-controls flex shrink-0 items-center gap-1">
+            <button type="button" aria-label="Open navigation" aria-expanded={open}
+                aria-controls="primary-navigation" onClick={() => setOpen(true)}
+                className="flex h-11 w-11 items-center justify-center rounded-lg text-text-2 hover:bg-surface-2">
+                <Menu size={20} />
+            </button>
+            <NotificationBell collapsed={false} />
+        </div>
+    );
+}
diff --git a/application/v2_ui/src/components/layout/PageHeader.tsx b/application/v2_ui/src/components/layout/PageHeader.tsx
index 2ec9060d9..9c337c3dd 100644
--- a/application/v2_ui/src/components/layout/PageHeader.tsx
+++ b/application/v2_ui/src/components/layout/PageHeader.tsx
@@ -2,6 +2,7 @@
 // Shared header for the non-chat content pages.
 
 import type { ReactNode } from 'react';
+import { MobileNavigation } from './MobileNavigation';
 
 export function PageHeader({
     title,
@@ -16,15 +17,16 @@ export function PageHeader({
     leading?: ReactNode;
 }) {
     return (
-        <header className="glass glass-edge flex min-h-14 shrink-0 items-center gap-4 rounded-none border-t-0 border-r-0 px-5 py-3">
+        <header className="page-header glass glass-edge flex min-h-14 shrink-0 flex-wrap items-center gap-2 rounded-none border-t-0 border-r-0 px-2 py-2 md:gap-4 md:px-5 md:py-3">
+            <MobileNavigation />
             {leading && <div className="flex shrink-0 items-center">{leading}</div>}
-            <div className="min-w-0">
+            <div className="min-w-0 flex-1">
                 <h1 className="truncate text-[15px] font-semibold text-text-1">{title}</h1>
                 {description && (
                     <p className="mt-0.5 truncate text-xs text-text-3">{description}</p>
                 )}
             </div>
-            {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+            {actions && <div className="page-header-actions ml-auto flex max-w-full flex-wrap items-center gap-2">{actions}</div>}
         </header>
     );
 }
diff --git a/application/v2_ui/src/components/layout/Sidebar.tsx b/application/v2_ui/src/components/layout/Sidebar.tsx
index 920b29d70..f1da133fc 100644
--- a/application/v2_ui/src/components/layout/Sidebar.tsx
+++ b/application/v2_ui/src/components/layout/Sidebar.tsx
@@ -317,6 +317,8 @@ export function Sidebar({ mobile = false }: { mobile?: boolean }) {
     const collapseRef = useRef<HTMLButtonElement>(null);
     const railScrollRef = useRef<HTMLDivElement>(null);
     const alertCalloutShown = useWorkflowAlertCalloutShown();
+    const navRef = useRef<HTMLElement>(null);
+    const previousRoute = useRef({ pathname: location.pathname, conversation: activeConversationId });
 
     const onChatPage = location.pathname.startsWith('/chat');
     const collapsed = mobile ? !mobileNavOpen : railCollapsed;
@@ -325,22 +327,44 @@ export function Sidebar({ mobile = false }: { mobile?: boolean }) {
     const toggleNavigation = () => mobile ? setMobileNavOpen(!mobileNavOpen) : toggleRail();
 
     useEffect(() => {
-        if (mobile) setMobileNavOpen(false);
+        const previous = previousRoute.current;
+        if (mobile && (previous.pathname !== location.pathname || previous.conversation !== activeConversationId)) {
+            setMobileNavOpen(false);
+        }
+        previousRoute.current = { pathname: location.pathname, conversation: activeConversationId };
     }, [mobile, location.pathname, activeConversationId, setMobileNavOpen]);
 
     useEffect(() => {
         if (!mobile || !mobileNavOpen) return;
+        const opener = document.activeElement;
         collapseRef.current?.focus();
         const onKeyDown = (event: KeyboardEvent) => {
+            if (document.querySelector('[role="dialog"]')) return;
             if (event.key === 'Escape') {
                 event.preventDefault();
                 setMobileNavOpen(false);
             }
+            if (event.key === 'Tab') {
+                const controls = [...(navRef.current?.querySelectorAll<HTMLElement>(
+                    'a[href], button, input, select, [tabindex="0"]',
+                ) ?? [])].filter((item) => !item.matches(':disabled') && item.getClientRects().length > 0);
+                const first = controls[0];
+                const last = controls[controls.length - 1];
+                if (event.shiftKey && document.activeElement === first) {
+                    event.preventDefault();
+                    last?.focus();
+                } else if (!event.shiftKey && document.activeElement === last) {
+                    event.preventDefault();
+                    first?.focus();
+                }
+            }
         };
         document.addEventListener('keydown', onKeyDown);
         return () => {
             document.removeEventListener('keydown', onKeyDown);
-            expandRef.current?.focus();
+            requestAnimationFrame(() => {
+                if (opener instanceof HTMLElement && opener.isConnected) opener.focus();
+            });
         };
     }, [mobile, mobileNavOpen, setMobileNavOpen]);
 
@@ -373,6 +397,7 @@ export function Sidebar({ mobile = false }: { mobile?: boolean }) {
 
     return (
         <nav
+            ref={navRef}
             id="primary-navigation"
             aria-label="Primary"
             onClickCapture={(event) => {
@@ -398,16 +423,16 @@ export function Sidebar({ mobile = false }: { mobile?: boolean }) {
                 <BrandMark collapsed={collapsed} />
                 {!collapsed && (
                     <>
-                        {/* Beside the brand rather than in a top bar, which V2 does not have. */}
-                        <NotificationBell collapsed={false} className="ml-auto" />
+                        {/* Desktop keeps notifications beside the brand; phones use the header. */}
+                        {!mobile && <NotificationBell collapsed={false} className="ml-auto" />}
                         <button
                             type="button"
                             ref={collapseRef}
                             onClick={toggleNavigation}
-                            aria-label="Collapse navigation"
+                            aria-label={mobile ? 'Close navigation' : 'Collapse navigation'}
                             aria-expanded="true"
                             aria-controls="primary-navigation"
-                            className="rounded-lg p-1.5 text-text-3 transition-colors hover:bg-surface-2 hover:text-text-1"
+                            className="ml-auto rounded-lg p-1.5 text-text-3 transition-colors hover:bg-surface-2 hover:text-text-1"
                         >
                             <ChevronLeft size={17} />
                         </button>
@@ -475,7 +500,7 @@ export function Sidebar({ mobile = false }: { mobile?: boolean }) {
             <div
                 ref={railScrollRef}
                 data-rail-scroll-region=""
-                className={clsx('flex-1', showConversations && 'min-h-0 overflow-y-auto')}
+                className={clsx('flex-1', (showConversations || mobile) && 'min-h-0 overflow-y-auto')}
             >
                 <ul className={clsx('space-y-0.5 px-3', onChatPage && 'mt-3')}>
                     {NAV_ITEMS.map((item) => (
diff --git a/application/v2_ui/src/components/workspace/GroupWorkspacePicker.tsx b/application/v2_ui/src/components/workspace/GroupWorkspacePicker.tsx
index 7fa74e774..e0f36b25f 100644
--- a/application/v2_ui/src/components/workspace/GroupWorkspacePicker.tsx
+++ b/application/v2_ui/src/components/workspace/GroupWorkspacePicker.tsx
@@ -16,6 +16,7 @@ export function GroupWorkspacePicker({
     onSelect: (id: string) => void;
 }) {
     const [search, setSearch] = useState('');
+    const [searchOpen, setSearchOpen] = useState(false);
     const [term, setTerm] = useState('');
     const [page, setPage] = useState(1);
     const [result, setResult] = useState<WorkspacePage | null>(null);
@@ -48,7 +49,7 @@ export function GroupWorkspacePicker({
     const items = result?.items ?? [];
     return (
         <div className="min-w-0 space-y-2">
-            <div className="grid min-w-0 gap-3 sm:grid-cols-2">
+            <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-end gap-2 sm:grid-cols-2 sm:gap-3">
                 <label className="min-w-0 space-y-1 text-xs text-text-2">
                     <span>Group workspace</span>
                     <select aria-label="Group workspace" className={INPUT_CLASS} value={value ?? ''}
@@ -61,7 +62,13 @@ export function GroupWorkspacePicker({
                         {items.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
                     </select>
                 </label>
-                <label className="min-w-0 space-y-1 text-xs text-text-2">
+                <button type="button" aria-label="Search your groups" aria-expanded={searchOpen}
+                    aria-controls="group-workspace-search" disabled={disabled}
+                    onClick={() => setSearchOpen((open) => !open)}
+                    className="min-h-11 rounded-xl border border-edge px-3 text-sm text-text-2 sm:hidden">
+                    Search
+                </button>
+                <label id="group-workspace-search" className={`min-w-0 space-y-1 text-xs text-text-2 ${searchOpen ? 'col-span-2 sm:col-span-1' : 'hidden sm:block'}`}>
                     <span>Search your groups</span>
                     <input type="search" className={INPUT_CLASS} value={search} disabled={disabled}
                         placeholder="Search all your groups" onChange={(event) => setSearch(event.target.value)} />
diff --git a/application/v2_ui/src/components/workspace/PublicWorkspacePicker.tsx b/application/v2_ui/src/components/workspace/PublicWorkspacePicker.tsx
index 85d9074a8..5efa72cd3 100644
--- a/application/v2_ui/src/components/workspace/PublicWorkspacePicker.tsx
+++ b/application/v2_ui/src/components/workspace/PublicWorkspacePicker.tsx
@@ -21,6 +21,7 @@ export function PublicWorkspacePicker({
     onSelect: (id: string) => void;
 }) {
     const [search, setSearch] = useState('');
+    const [searchOpen, setSearchOpen] = useState(false);
     const labels = usePublicWorkspaceLabels();
     const [term, setTerm] = useState('');
     const [page, setPage] = useState(1);
@@ -54,7 +55,7 @@ export function PublicWorkspacePicker({
     const items = result?.items ?? [];
     return (
         <div className="min-w-0 space-y-2">
-            <div className="grid min-w-0 gap-3 sm:grid-cols-2">
+            <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-end gap-2 sm:grid-cols-2 sm:gap-3">
                 <label className="min-w-0 space-y-1 text-xs text-text-2">
                     <span>{labels.singular}</span>
                     <select aria-label={labels.singular} className={INPUT_CLASS} value={value ?? ''}
@@ -67,7 +68,13 @@ export function PublicWorkspacePicker({
                         {items.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}
                     </select>
                 </label>
-                <label className="min-w-0 space-y-1 text-xs text-text-2">
+                <button type="button" aria-label={`Search ${labels.lower_plural}`} aria-expanded={searchOpen}
+                    aria-controls="public-workspace-search" disabled={disabled}
+                    onClick={() => setSearchOpen((open) => !open)}
+                    className="min-h-11 rounded-xl border border-edge px-3 text-sm text-text-2 sm:hidden">
+                    Search
+                </button>
+                <label id="public-workspace-search" className={`min-w-0 space-y-1 text-xs text-text-2 ${searchOpen ? 'col-span-2 sm:col-span-1' : 'hidden sm:block'}`}>
                     <span>Search {labels.lower_plural}</span>
                     <input type="search" className={INPUT_CLASS} value={search} disabled={disabled}
                         placeholder={`Search all ${labels.lower_plural}`} onChange={(event) => setSearch(event.target.value)} />
diff --git a/application/v2_ui/src/components/workspace/WorkspaceShell.tsx b/application/v2_ui/src/components/workspace/WorkspaceShell.tsx
index b1e09de46..6719cba86 100644
--- a/application/v2_ui/src/components/workspace/WorkspaceShell.tsx
+++ b/application/v2_ui/src/components/workspace/WorkspaceShell.tsx
@@ -1,7 +1,8 @@
 // WorkspaceShell.tsx
 
-import { useMemo, type ReactNode } from 'react';
-import { NavLink } from 'react-router-dom';
+import { useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { MobileNavigationContext } from '../layout/MobileNavigation';
 import { clsx } from 'clsx';
 import { LayoutGrid, PanelLeftClose, PanelLeftOpen, type LucideIcon } from 'lucide-react';
 import { useUserSettingsStore } from '../../stores/userSettingsStore';
@@ -26,23 +27,49 @@ export function WorkspaceShell({
     fullBleed?: boolean;
 }) {
     const railCollapsed = useUserSettingsStore((state) => state.settings.v2WorkspaceRailCollapsed === true);
+    const { mobile } = useContext(MobileNavigationContext);
+    const [sectionsOpen, setSectionsOpen] = useState(false);
+    const location = useLocation();
+    const sectionOpener = useRef<HTMLButtonElement>(null);
+    useEffect(() => setSectionsOpen(false), [location.pathname, mobile]);
+    const closeSections = () => {
+        setSectionsOpen(false);
+        sectionOpener.current?.focus();
+    };
     const updateUserSettings = useUserSettingsStore((state) => state.update);
     const groups = useMemo(() => groupWorkspaceSections(navigableSections(sections)), [sections]);
+    const activeSection = sections.find(({ section }) =>
+        location.pathname === `${basePath}/${section.id}` || location.pathname.startsWith(`${basePath}/${section.id}/`));
+    const collapsed = !mobile && railCollapsed;
     const linkClass = ({ isActive }: { isActive: boolean }) => clsx(
         'flex items-center gap-2.5 rounded-lg text-left text-sm transition-colors',
-        railCollapsed ? 'justify-center px-2 py-2' : 'px-2.5 py-2',
+        collapsed ? 'justify-center px-2 py-2' : 'px-2.5 py-2',
         isActive ? 'bg-accent-soft font-medium text-accent' : 'text-text-2 hover:bg-surface-2 hover:text-text-1',
     );
 
     return (
         <div className="flex h-full min-h-0 flex-col">
             {header}
-            <div className="flex min-h-0 flex-1 gap-4 overflow-hidden p-4">
+            {mobile && <button ref={sectionOpener} type="button" aria-label="Workspace sections"
+                aria-expanded={sectionsOpen} aria-controls="workspace-section-navigation"
+                onClick={() => setSectionsOpen((open) => !open)}
+                className="mx-2 my-1 flex min-h-11 shrink-0 items-center gap-2 rounded-xl border border-edge bg-surface-1 px-3 text-sm text-text-2">
+                <LayoutGrid size={17} />
+                <span>Workspace · {activeSection?.section.label || 'Overview'}</span>
+                {sectionsOpen ? <PanelLeftClose size={16} className="ml-auto" /> : <PanelLeftOpen size={16} className="ml-auto" />}
+            </button>}
+            <div className="relative flex min-h-0 flex-1 gap-4 overflow-hidden p-2 md:p-4">
+                {mobile && sectionsOpen && <button type="button" tabIndex={-1} aria-label="Close workspace sections"
+                    className="absolute inset-0 z-10 bg-black/20" onClick={closeSections} />}
                 <nav aria-label="Workspace sections" data-tour="workspace-sections" className={clsx(
                     'flex shrink-0 flex-col gap-3 overflow-y-auto transition-[width]',
-                    railCollapsed ? 'w-12' : 'w-12 md:w-52',
-                )}>
-                    <button type="button"
+                    mobile ? (sectionsOpen ? 'glass-modal absolute inset-x-2 top-0 z-20 max-h-full rounded-xl p-3' : 'hidden') : collapsed ? 'w-12' : 'w-52',
+                )} id="workspace-section-navigation"
+                    onKeyDown={(event) => { if (event.key === 'Escape') closeSections(); }}
+                    onClickCapture={(event) => {
+                        if (mobile && event.target instanceof Element && event.target.closest('a')) closeSections();
+                    }}>
+                    {!mobile && <button type="button"
                         onClick={() => updateUserSettings({ v2WorkspaceRailCollapsed: !railCollapsed })}
                         aria-label={railCollapsed ? 'Expand workspace sections' : 'Collapse workspace sections'}
                         aria-expanded={!railCollapsed}
@@ -55,16 +82,16 @@ export function WorkspaceShell({
                         {railCollapsed ? <PanelLeftOpen size={15} /> : (
                             <><PanelLeftClose size={15} /><span className="hidden md:inline">Collapse</span></>
                         )}
-                    </button>
+                    </button>}
                     <NavLink to={normalizeWorkspaceUrl(basePath, window.location.origin)} end className={linkClass} title={railCollapsed ? 'Overview' : undefined}
                         data-tour="workspace-overview">
                         <LayoutGrid size={15} className="shrink-0" />
-                        <span className={railCollapsed ? 'sr-only' : 'sr-only md:not-sr-only md:truncate'}>Overview</span>
+                        <span className={collapsed ? 'sr-only' : 'truncate'}>Overview</span>
                     </NavLink>
                     {groups.map(({ group, sections: entries }) => (
                         <div key={group.id} className="space-y-0.5">
-                            {railCollapsed ? <div aria-hidden="true" className="mx-2 my-1.5 border-t border-edge" /> : (
-                                <p className="hidden px-2.5 text-[11px] font-semibold tracking-wide text-text-3 uppercase md:block">{group.label}</p>
+                            {collapsed ? <div aria-hidden="true" className="mx-2 my-1.5 border-t border-edge" /> : (
+                                <p className="px-2.5 text-[11px] font-semibold tracking-wide text-text-3 uppercase">{group.label}</p>
                             )}
                             {entries.map(({ section }) => {
                                 const Icon = section.icon;
@@ -75,7 +102,7 @@ export function WorkspaceShell({
                                     )} className={linkClass}
                                         title={railCollapsed ? `${group.label}: ${section.label}` : undefined}>
                                         <Icon size={15} className="shrink-0" />
-                                        <span className={railCollapsed ? 'sr-only' : 'sr-only md:not-sr-only md:truncate'}>{section.label}</span>
+                                        <span className={collapsed ? 'sr-only' : 'truncate'}>{section.label}</span>
                                     </NavLink>
                                 );
                             })}
diff --git a/application/v2_ui/src/pages/ChatPage.tsx b/application/v2_ui/src/pages/ChatPage.tsx
index 2d5b70e88..5a595c0e9 100644
--- a/application/v2_ui/src/pages/ChatPage.tsx
+++ b/application/v2_ui/src/pages/ChatPage.tsx
@@ -11,6 +11,8 @@ import {
     ListTree,
     Maximize2,
     Minimize2,
+    MessageSquarePlus,
+    MoreHorizontal,
     Users,
 } from 'lucide-react';
 import { useChatStore, type DrawerMode } from '../stores/chatStore';
@@ -41,6 +43,7 @@ import {
 import { WORKFLOW_RESULT_INVALID_LINK_MESSAGE } from '../lib/workflowResults';
 import { MessageList } from '../components/chat/MessageList';
 import { Composer } from '../components/chat/Composer';
+import { MobileNavigation } from '../components/layout/MobileNavigation';
 import { ConversationDrawer } from '../components/chat/ConversationDrawer';
 import { OrchestrationPlanEditorHost } from '../components/chat/OrchestrationPlanEditor';
 import { ConversationDetails } from '../components/chat/ConversationDetails';
@@ -221,8 +224,10 @@ function useConversationUrlSync() {
 }
 
 function ChatHeader({ onOpenDetails }: { onOpenDetails: () => void }) {
+    const [actionsOpen, setActionsOpen] = useState(false);
     const { activeConversationId, conversations, drawerMode, setDrawerMode, metadata } =
         useChatStore();
+    useEffect(() => setActionsOpen(false), [activeConversationId]);
     const contentsEnabled = useBootstrapStore((state) =>
         Boolean(state.data?.features?.enable_conversation_contents_drawer),
     );
@@ -296,17 +301,38 @@ function ChatHeader({ onOpenDetails }: { onOpenDetails: () => void }) {
     return (
         <header
             data-tour="chat-header"
-            className="glass glass-edge flex h-14 shrink-0 items-center gap-3 rounded-none border-t-0 border-r-0 px-5"
+            className="chat-header glass glass-edge relative flex min-h-14 shrink-0 flex-wrap items-center gap-2 rounded-none border-t-0 border-r-0 px-2 md:gap-3 md:px-5"
         >
-            <h1 className="truncate text-[15px] font-semibold text-text-1">
+            <MobileNavigation />
+            <h1 className="min-w-0 flex-1 truncate text-[15px] font-semibold text-text-1">
                 {active?.title || 'New chat'}
             </h1>
             {/* Derived from this conversation's own metadata. Reading the user's active
                 group here instead made every conversation show the same badge. */}
             <ConversationBadges metadata={metadata} />
+            <button type="button" aria-label="Start a new chat"
+                onClick={() => useChatStore.getState().startNewConversation()}
+                className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-text-2 hover:bg-surface-2 md:hidden">
+                <MessageSquarePlus size={18} />
+            </button>
+            {activeConversationId && <button type="button" aria-label="Conversation actions"
+                aria-expanded={actionsOpen} aria-controls="mobile-conversation-actions"
+                onClick={() => setActionsOpen((open) => !open)}
+                className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-text-2 hover:bg-surface-2 md:hidden">
+                <MoreHorizontal size={20} />
+            </button>}
 
             {activeConversationId && (
-                <div className="ml-auto flex items-center gap-1">
+                <div id="mobile-conversation-actions" data-open={actionsOpen}
+                    onKeyDown={(event) => {
+                        if (event.key === 'Escape') {
+                            setActionsOpen(false);
+                            event.currentTarget.parentElement?.querySelector<HTMLButtonElement>(
+                                '[aria-controls="mobile-conversation-actions"]',
+                            )?.focus();
+                        }
+                    }}
+                    className="chat-header-actions ml-auto flex items-center gap-1">
                     {shareable && (
                         <button
                             type="button"
@@ -343,7 +369,7 @@ function ChatHeader({ onOpenDetails }: { onOpenDetails: () => void }) {
                         }
                         aria-label="Toggle chat width"
                         className={clsx(
-                            'rounded-lg p-2 transition-colors',
+                            'hidden rounded-lg p-2 transition-colors md:inline-flex',
                             chatWidth === 'wide'
                                 ? 'bg-accent-soft text-accent'
                                 : 'text-text-3 hover:bg-surface-2 hover:text-text-1',
@@ -435,11 +461,12 @@ function ChatHeader({ onOpenDetails }: { onOpenDetails: () => void }) {
                             ) : null}
                         </button>
                     )}
+                    <TourLauncher tourId="chat" />
                 </div>
             )}
 
             {/* Pushed right on its own when there is no conversation and so no tool row. */}
-            <TourLauncher tourId="chat" className={clsx(!activeConversationId && 'ml-auto')} />
+            {!activeConversationId && <TourLauncher tourId="chat" className="ml-auto" />}
         </header>
     );
 }
diff --git a/application/v2_ui/src/pages/GroupWorkspacePage.tsx b/application/v2_ui/src/pages/GroupWorkspacePage.tsx
index 1efb73f9f..bf9f132a5 100644
--- a/application/v2_ui/src/pages/GroupWorkspacePage.tsx
+++ b/application/v2_ui/src/pages/GroupWorkspacePage.tsx
@@ -374,7 +374,7 @@ export function GroupWorkspacePage() {
                         <Compass size={14} />Browse all groups
                     </GlassButton>
                 )} />
-            <div className="shrink-0 space-y-3 border-b border-edge px-4 py-3">
+            <div className="shrink-0 space-y-2 border-b border-edge px-2 py-2 md:space-y-3 md:px-4 md:py-3">
                 <GroupWorkspacePicker key={viewerId} value={state.pendingGroupId ?? groupId}
                     selectedName={context?.workspace.name || bootstrap?.scope?.groups?.find((group) => group.id === groupId)?.name}
                     disabled={dirty || resourceBusy || state.loading || state.activating || Boolean(externalTarget) || state.needsReconciliation}
diff --git a/application/v2_ui/src/pages/PublicWorkspacePage.tsx b/application/v2_ui/src/pages/PublicWorkspacePage.tsx
index f6ec4dd57..a53cce5fb 100644
--- a/application/v2_ui/src/pages/PublicWorkspacePage.tsx
+++ b/application/v2_ui/src/pages/PublicWorkspacePage.tsx
@@ -245,7 +245,7 @@ export function PublicWorkspacePage() {
         <>
             <PageHeader title={labels.plural} description="Read-only shared knowledge published for everyone" leading={<Globe size={20} className="text-accent" />}
                 actions={<GlassButton size="sm" variant="subtle" onClick={() => navigate('/public/directory')}><LayoutGrid size={14} />Public directory</GlassButton>} />
-            <div className="shrink-0 space-y-3 border-b border-edge px-4 py-3">
+            <div className="shrink-0 space-y-2 border-b border-edge px-2 py-2 md:space-y-3 md:px-4 md:py-3">
                 <PublicWorkspacePicker key={viewerId} value={state.pendingWorkspaceId ?? workspaceId}
                     selectedName={context?.workspace.name || bootstrap?.scope?.public_workspaces?.find((workspace) => workspace.id === workspaceId)?.name}
                     disabled={state.loading}
diff --git a/application/v2_ui/src/styles/theme.css b/application/v2_ui/src/styles/theme.css
index 1046eaa4b..6c00d7bb1 100644
--- a/application/v2_ui/src/styles/theme.css
+++ b/application/v2_ui/src/styles/theme.css
@@ -8,6 +8,107 @@
  */
 @custom-variant dark (&:where(.dark, .dark *));
 
+.app-shell {
+    height: 100%;
+    height: 100dvh;
+    padding-top: env(safe-area-inset-top, 0px);
+    padding-right: env(safe-area-inset-right, 0px);
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    padding-left: env(safe-area-inset-left, 0px);
+}
+
+@media (max-width: 767px) {
+    #primary-navigation li[class~='group/row'] > div {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .mobile-navigation-controls button,
+    #primary-navigation button,
+    #primary-navigation a,
+    #workspace-section-navigation a,
+    .chat-header-actions button,
+    .composer-primary-actions button,
+    .composer-secondary-tools button,
+    .explorer-command-bar button,
+    .explorer-command-bar select,
+    .explorer-command-bar input,
+    .explorer-status-bar button,
+    .explorer-status-bar select {
+        min-height: 44px;
+    }
+
+    .mobile-navigation-controls button,
+    #primary-navigation button,
+    .chat-header-actions button,
+    .composer-primary-actions button,
+    .explorer-command-bar button,
+    .explorer-status-bar button {
+        min-width: 44px;
+    }
+
+    .page-header-actions {
+        flex-basis: 100%;
+    }
+
+    .chat-header-actions {
+        flex-basis: 100%;
+        flex-wrap: wrap;
+        padding-bottom: 8px;
+    }
+
+    .chat-header-actions[data-open='false'] {
+        display: none;
+    }
+
+    [data-tour='composer-tools'] {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+    }
+
+    .composer-secondary-tools {
+        grid-column: 1 / -1;
+        grid-row: 2;
+        min-width: 0;
+        max-height: 30dvh;
+        overflow-y: auto;
+        padding-top: 8px;
+        border-top: 1px solid var(--edge);
+    }
+
+    .composer-secondary-tools[data-open='false'] {
+        display: none;
+    }
+
+    .composer-primary-actions {
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .document-table {
+        table-layout: fixed;
+    }
+
+    .document-table th:first-child {
+        width: 44px;
+    }
+
+    .explorer-command-bar input,
+    .explorer-command-bar select,
+    #group-workspace-search input,
+    #public-workspace-search input,
+    select[aria-label='Group workspace'] {
+        font-size: max(16px, 1rem);
+    }
+}
+
+@media (max-height: 600px) {
+    #primary-navigation [data-rail-scroll-region] {
+        min-height: 0;
+        overflow-y: auto;
+    }
+}
+
 /*
  * Text scale, driven by a `data-font-size` attribute on <html>.
  *
diff --git a/docs/explanation/features/REACT_V2_UI.md b/docs/explanation/features/REACT_V2_UI.md
index 3c6c85807..9e0b39b22 100644
--- a/docs/explanation/features/REACT_V2_UI.md
+++ b/docs/explanation/features/REACT_V2_UI.md
@@ -4,7 +4,7 @@
 
 The V2 interface is a React single-page application that runs alongside the existing
 server-rendered SimpleChat UI. It exists to evaluate a different visual and interaction
-direction — a glassmorphism design system, a single collapsible left rail with no top bar,
+direction — a glassmorphism design system, a single collapsible desktop left rail,
 and a search-first admin surface — without disturbing the interface people use today.
 
 It reuses the existing Flask domain APIs. Personal agent/action authoring adds an
@@ -15,6 +15,20 @@ opt-in editor representation while leaving classic callers compatible.
 **Native Agents catalogue:** 0.261.305 (`application/single_app/config.py`)
 **Deployer version:** 1.0.26
 
+**Responsive mobile layout implemented in version: 0.261.323**, recorded in
+`application/single_app/config.py`. Below 768px, the same navigation opens as a
+drawer from the page header and consumes no content width when closed. Chat and
+workspace headers integrate the trigger; pages without a shared header receive
+a compact branded header. Notifications remain available beside the trigger.
+Desktop rail preferences are unaffected.
+
+Chat keeps tools access, attachment, voice when enabled, and Send/Stop in a
+stable mobile action row. Secondary controls remain reachable through **Chat
+tools**. Workspace sections use a labelled disclosure rather than a second
+icon column, and document rows prioritize names, status, and selection.
+See [Using V2 on a phone](../../guides/v2-mobile.md) and
+[V2 mobile layout fix](../fixes/V2_MOBILE_LAYOUT_FIX.md).
+
 ### Dependencies
 
 | Dependency | Purpose |
diff --git a/docs/explanation/features/V2_DOCUMENTS_EXPLORER.md b/docs/explanation/features/V2_DOCUMENTS_EXPLORER.md
index d6af2782e..78b6c649c 100644
--- a/docs/explanation/features/V2_DOCUMENTS_EXPLORER.md
+++ b/docs/explanation/features/V2_DOCUMENTS_EXPLORER.md
@@ -11,6 +11,20 @@ and deleting — so that browsing by tag and administering tags are no longer co
 same toolbar.
 
 **Implemented in version:** `0.261.048`
+
+**Responsive rows implemented in version: 0.261.323**
+(`application/single_app/config.py`). Below 768px, the existing details table
+fits the content pane rather than enforcing its desktop minimum width. Names
+wrap, selection remains visible, and status, classification, provenance, and
+restriction information stay available in the row. Open a document's name to
+inspect secondary metadata in **Document details**. Desktop column preferences
+are not overwritten by the phone layout. **Document view options** discloses
+sorting and the existing view controls; Tiles view remains available.
+
+This presentation is shared by personal, group, and public documents; each
+scope retains its own reader, operations, and permissions. Compact filter and
+details dialogs and the existing selection-aware **Actions** picker are reused.
+
 **Dependencies**
 
 | Requirement | Why |
diff --git a/docs/explanation/features/V2_MY_WORKSPACE.md b/docs/explanation/features/V2_MY_WORKSPACE.md
index ee71e601b..59ef22ae6 100644
--- a/docs/explanation/features/V2_MY_WORKSPACE.md
+++ b/docs/explanation/features/V2_MY_WORKSPACE.md
@@ -15,6 +15,14 @@ serve file sources and actions.
 
 **Implemented in version:** 0.261.042
 
+**Responsive sections implemented in version: 0.261.323**
+(`application/single_app/config.py`). On phones narrower than 768px,
+**Workspace sections** shows the current section and opens the same permitted
+section links above the content. Choosing a section closes the disclosure.
+The desktop rail and its saved collapse preference remain independent.
+Group/public workspace pickers keep selection visible and disclose workspace
+search on widths below 640px, leaving more vertical room for documents.
+
 **File-source configuration implemented in version: 0.261.310**, recorded in
 `application/single_app/config.py`. Personal, group and public sources now use
 the native shared editor; see [V2 File Source Configuration](V2_FILE_SOURCE_CONFIGURATION.md).
diff --git a/docs/explanation/fixes/V2_MOBILE_LAYOUT_FIX.md b/docs/explanation/fixes/V2_MOBILE_LAYOUT_FIX.md
new file mode 100644
index 000000000..ff3cc53f2
--- /dev/null
+++ b/docs/explanation/fixes/V2_MOBILE_LAYOUT_FIX.md
@@ -0,0 +1,65 @@
+# V2 mobile layout fix
+
+Fixed/Implemented in version: **0.261.323**
+(`application/single_app/config.py`).
+
+## Issue and root cause
+
+The mobile shell reserved 68px for a permanent global icon rail even when its
+drawer was closed. Workspaces retained another 48px section rail plus spacing.
+The composer mixed selectors and primary actions in a wrapping row, while the
+document table required at least 42rem of width. Together these desktop
+assumptions crowded phone input and document browsing.
+
+## Technical changes
+
+`AppShell.tsx`, `MobileNavigation.tsx`, `Sidebar.tsx`, and `PageHeader.tsx`
+share mobile navigation/header composition. The drawer consumes no closed
+width and retains focus handling, backdrop/Escape dismissal, conversation
+history, and mobile state separate from desktop preferences. The same
+notification bell is hosted by the mobile header.
+
+`ChatPage.tsx` discloses conversation actions and exposes New chat.
+`Composer.tsx` separates a stable primary action row from secondary tools on
+phones. Existing state and handlers continue to own selections, gating,
+uploads, approval, and generation. `ComposerHighlight.tsx` keeps input and
+overlay typography synchronized.
+
+`WorkspaceShell.tsx` discloses permitted sections instead of reserving a
+mobile column. Shared workspace pickers disclose search on small phones.
+`DocumentTable.tsx` reuses document rows with wrapped names, visible selection,
+status/classification/restriction information, and access to full details.
+The explorer retains its existing scoped APIs, permission checks, dialogs,
+view modes, and desktop column preferences. `ExplorerCommandBar.tsx` discloses
+view options on phones so the toolbar leaves room for document rows.
+
+`theme.css` and `index.html` add dynamic viewport sizing, safe-area support,
+and scoped mobile touch targets without disabling browser zoom. No separate
+mobile routes, new settings, dependencies, or authorization changes are added.
+
+## Validation
+
+Regression coverage is in `functional_tests/test_v2_mobile_layout.py` and
+`ui_tests/test_v2_mobile_navigation.py`,
+`ui_tests/test_v2_mobile_chat_layout.py`, and
+`ui_tests/test_v2_mobile_workspace_documents.py`.
+
+Browser tests use production components and CSS with synthetic HTTP boundaries.
+They cover closed navigation width, focus return, drawer scrolling, primary
+composer alignment, document selection/details, all three document scopes,
+theme variants, and desktop preferences after resizing.
+
+The focused mobile suite passed **23 tests**, including enlarged text and a
+classification banner. Existing group/public document layout cases passed
+**8 tests**, and shared workspace overview/contextual-action layout cases passed
+**12 tests**. The related mobile, account-menu, workspace-section, and document
+functional contracts passed **40 tests**. Documentation coverage and site-quality
+checks passed **7/7** and **6/6**, respectively. TypeScript and production builds
+completed successfully; Vite retains its existing large-bundle warning.
+
+Before: permanent rails narrowed the phone pane and the document table required
+horizontal scrolling. After: closed navigation consumes no phone width and the
+same document rows adapt without replacing desktop preferences.
+
+Real iPhone Safari keyboard, browser chrome, and home-indicator verification
+remain a manual device check; Chromium emulation does not prove those behaviors.
diff --git a/docs/guides/v2-mobile.md b/docs/guides/v2-mobile.md
new file mode 100644
index 000000000..a293772f7
--- /dev/null
+++ b/docs/guides/v2-mobile.md
@@ -0,0 +1,58 @@
+---
+layout: page
+title: "Use V2 on a phone"
+description: "Find navigation, chat tools, and workspace documents without permanent sidebars narrowing your phone screen."
+section: "Guides"
+audience: user
+version: "0.261.323"
+---
+
+## Find your work
+
+Fixed/Implemented in version: **0.261.323**, recorded in
+`application/single_app/config.py`.
+
+On screens narrower than 768 pixels, **Open navigation** in the header gives
+you the same destinations and account controls as the desktop rail. In Chat,
+the drawer also contains conversation history and search. Close it with its
+close button or by tapping the shaded page. Keyboard users can use Escape.
+The page uses the full width while navigation is closed.
+
+The notification bell stays in the header, so you do not need to open navigation
+to check an unread notice. The classification banner remains above the interface
+when your administrator has configured one.
+
+## Compose and inspect a chat
+
+**Start a new chat** is directly available in the phone's chat header.
+**Conversation actions** reveals the details, people, documents, contents, and
+plan controls your current conversation supports.
+
+The composer keeps attachment, voice when enabled, and Send/Stop together.
+**Chat tools** opens the existing model, agent, reasoning, and capability
+controls. Closing this area does not clear your choices. When orchestration is
+active, its approval mode appears in the collapsed summary.
+
+## Browse workspace documents
+
+**Workspace sections** names your current section and opens the workspace's
+permitted section links. It replaces the workspace icon rail on phones.
+Group/public workspace selection stays visible; **Search** expands the
+workspace search field on small phones.
+
+Document rows prioritize readable names, processing/status information, and
+selection. Tap the document name for its details, including secondary metadata.
+Use Filters to narrow the list and the selection-aware action controls to work
+with selected files. **Document view options** reveals sorting and the existing
+view controls without keeping every toolbar row above your documents.
+Available operations still depend on your workspace role;
+a phone does not gain access to desktop-only permissions.
+
+## Returning to a larger screen
+
+The same pages and data are used at every size. At 768 pixels and wider, the
+desktop rail returns with its saved collapse preference. Desktop document column
+choices are preserved; resizing does not save a different view or reset your chat.
+
+Actual Safari keyboard and home-indicator behavior should be checked on a real
+device; browser viewport emulation alone cannot certify that experience.
diff --git a/docs/reference/chat-controls.md b/docs/reference/chat-controls.md
index a4441fed4..4aafda6bf 100644
--- a/docs/reference/chat-controls.md
+++ b/docs/reference/chat-controls.md
@@ -4,7 +4,7 @@ title: "Chat interface controls"
 description: "Reference for every documented control in the SimpleChat chat interface."
 section: "Reference"
 audience: user
-version: "0.261.321"
+version: "0.261.323"
 ---
 
 ## How to use this reference
@@ -32,11 +32,22 @@ private profile preferences.
 
 ### React V2 navigation on narrow screens
 
-Since **0.261.113**, **Expand navigation** opens the navigation rail above the
-chat on screens narrower than 768 pixels. **Collapse navigation**, Escape, or
-the shaded **Close navigation** backdrop closes it. Choosing a destination or
-conversation also closes the mobile rail. These actions do not change the
-desktop navigation preference.
+Fixed/Implemented in version: **0.261.323** (`application/single_app/config.py`).
+On screens narrower than 768 pixels, **Open navigation** in the header opens
+the existing navigation and conversation history as a drawer. No icon strip
+occupies chat width while the drawer is closed. **Close navigation**, Escape,
+or the shaded backdrop closes it and returns focus to the opener. Choosing a
+destination or conversation also closes it without changing the desktop preference.
+
+| V2 control | Purpose | Availability |
+| --- | --- | --- |
+| Open navigation | Reaches conversations, workspaces, account, support, and theme controls without permanently narrowing the page. | Mobile page header |
+| Start a new chat | Resets the current draft/conversation using the same behavior as the rail's New chat. | Mobile chat header |
+| Conversation actions | Discloses people, details, documents, contents, and plan controls offered for this conversation. | Mobile header with an active conversation |
+| Chat tools | Opens the existing model, agent, capability, and reasoning controls; when orchestrating, the collapsed summary includes approval mode. | Mobile composer |
+
+Attachment, voice when enabled, and Send/Stop remain beside **Chat tools**.
+The tools disclosure does not clear selected options or change capability gates.
 
 Conversation drawers overlay the chat below the wide-desktop breakpoint rather
 than leaving the message pane too narrow to read. **Close panel** returns to the
@@ -58,8 +69,8 @@ and other pages don't scroll this way.
 Since **0.261.195**, the V2 navigation rail has a notification bell beside the
 application's name. It shows the unread count, or a dot when the rail is collapsed,
 and opens a panel where you can follow, mark read, or dismiss notifications without
-leaving the chat. On narrow screens the bell is on the collapsed strip and in the
-open navigation, and Escape closes the panel before the navigation. Since
+leaving the chat. Since **0.261.323**, narrow screens keep one bell in the page
+header rather than duplicating it inside the drawer. Since
 **0.261.236**, a workflow alert that needs attention pops up from the bell as well.
 See [Manage notifications]({{ '/guides/manage-notifications/' | relative_url }}).
 
diff --git a/functional_tests/test_v2_documents_explorer.py b/functional_tests/test_v2_documents_explorer.py
index 0109bc76b..7c981d65e 100644
--- a/functional_tests/test_v2_documents_explorer.py
+++ b/functional_tests/test_v2_documents_explorer.py
@@ -3,7 +3,7 @@
 """
 Functional test for the V2 workspace documents explorer.
 
-Version: 0.261.129
+Version: 0.261.323
 Implemented in: 0.261.048
 Shared workspace shell integration: 0.261.127
 
@@ -739,7 +739,7 @@ def test_the_workspace_rail_can_be_collapsed():
     )
     assert "PanelLeftClose" in page and "PanelLeftOpen" in page
     assert 'aria-expanded={!railCollapsed}' in page
-    assert "railCollapsed ? 'sr-only'" in page, (
+    assert "collapsed ? 'sr-only'" in page, (
         "A collapsed entry still needs its label available to a screen reader"
     )
 
diff --git a/functional_tests/test_v2_mobile_layout.py b/functional_tests/test_v2_mobile_layout.py
new file mode 100644
index 000000000..fc7e89efb
--- /dev/null
+++ b/functional_tests/test_v2_mobile_layout.py
@@ -0,0 +1,73 @@
+# test_v2_mobile_layout.py
+"""
+Functional contracts for the shared V2 responsive layout.
+Version: 0.261.323
+Implemented in: 0.261.323
+
+Pins shared components, preference isolation, local assets, and responsive
+document presentation. Geometry and interactions are covered by the mobile UI tests.
+"""
+
+from pathlib import Path
+
+import pytest
+
+
+ROOT = Path(__file__).resolve().parents[1]
+SOURCE = ROOT / "application" / "v2_ui" / "src"
+
+
+def read(relative):
+    return (SOURCE / relative).read_text(encoding="utf-8")
+
+
+def test_navigation_does_not_reserve_closed_mobile_rail_space():
+    shell = read("components/layout/AppShell.tsx")
+    assert "w-[68px]" not in shell
+    assert "(!mobile || mobileNavOpen)" in shell
+    assert "MobileNavigationContext.Provider" in shell
+    assert "mobile && mobileNavOpen" in shell
+    assert ".inert =" in shell
+    for file_name in ("components/layout/PageHeader.tsx", "pages/ChatPage.tsx"):
+        assert "<MobileNavigation" in read(file_name)
+
+
+def test_mobile_disclosure_does_not_write_desktop_preferences():
+    controls = read("components/layout/MobileNavigation.tsx")
+    assert "setMobileNavOpen" in controls
+    assert "toggleRail" not in controls
+    assert "useUserSettingsStore" not in controls
+    state = read("stores/uiStore.ts")
+    assert "setMobileNavOpen: (mobileNavOpen) => set({ mobileNavOpen })" in state
+    workspace = read("components/workspace/WorkspaceShell.tsx")
+    assert "const collapsed = !mobile && railCollapsed" in workspace
+    assert "groupWorkspaceSections(navigableSections(sections))" in workspace
+
+
+def test_mobile_documents_reuse_rows_without_persisting_column_changes():
+    table = read("components/documents/DocumentTable.tsx")
+    assert "mobile ? column.id === 'name' : columns.includes(column.id)" in table
+    assert "DocumentStatusBadge" in table
+    assert "ClassificationBadge" in table
+    assert "blockedReason" in table
+    assert "updatePrefs" not in table
+    assert "max-md:break-words" in table
+    composer = read("components/chat/Composer.tsx")
+    assert 'aria-controls="composer-secondary-tools"' in composer
+    assert "composer-primary-actions" in composer
+    assert "effectiveApprovalMode" in composer
+
+
+def test_viewport_support_preserves_zoom_and_local_assets():
+    index = (ROOT / "application" / "v2_ui" / "index.html").read_text(encoding="utf-8")
+    assert "viewport-fit=cover" in index
+    assert "user-scalable=no" not in index
+    assert "maximum-scale" not in index
+    css = read("styles/theme.css")
+    assert "100dvh" in css
+    assert "safe-area-inset-bottom" in css
+    assert "min-height: 44px" in css
+
+
+if __name__ == "__main__":
+    raise SystemExit(pytest.main([__file__, "-q"]))
diff --git a/ui_tests/test_v2_group_classic_handoffs.py b/ui_tests/test_v2_group_classic_handoffs.py
index 09c2ad2de..3c9bff9dd 100644
--- a/ui_tests/test_v2_group_classic_handoffs.py
+++ b/ui_tests/test_v2_group_classic_handoffs.py
@@ -1,7 +1,7 @@
 # test_v2_group_classic_handoffs.py
 """
 M8A classic handoff cleanup for the native V2 group workspace.
-Version: 0.261.271
+Version: 0.261.323
 Implemented in: 0.261.153
 A workflow's resource segment is its editor page, no longer a redirect to the workflow query: 0.261.271
 
@@ -31,6 +31,9 @@
 
 
 def section(page, label):
+    opener = page.get_by_role("button", name="Workspace sections", exact=True)
+    if opener.is_visible():
+        opener.click()
     page.get_by_role("navigation", name="Workspace sections", exact=True).get_by_role("link", name=label, exact=True).click()
 
 
diff --git a/ui_tests/test_v2_group_journeys.py b/ui_tests/test_v2_group_journeys.py
index 16b76a583..96f33fb6a 100644
--- a/ui_tests/test_v2_group_journeys.py
+++ b/ui_tests/test_v2_group_journeys.py
@@ -1,7 +1,7 @@
 # test_v2_group_journeys.py
 """M8 group workspace end-to-end journeys, on the real built SPA.
 
-Version: 0.261.271
+Version: 0.261.323
 Implemented in: 0.261.161
 The workflow editor is a routed page whose draft freezes the group switcher, as Settings does: 0.261.271
 
@@ -114,6 +114,9 @@
 
 
 def section(page, label):
+    opener = page.get_by_role("button", name="Workspace sections", exact=True)
+    if opener.is_visible():
+        opener.click()
     page.get_by_role("navigation", name="Workspace sections", exact=True).get_by_role(
         "link", name=label, exact=True).click()
 
diff --git a/ui_tests/test_v2_group_workspace_shell.py b/ui_tests/test_v2_group_workspace_shell.py
index 4b2af4011..9bbb021a6 100644
--- a/ui_tests/test_v2_group_workspace_shell.py
+++ b/ui_tests/test_v2_group_workspace_shell.py
@@ -1,7 +1,7 @@
 # test_v2_group_workspace_shell.py
 """
 Real-SPA group selection, navigation, scope, and draft safety.
-Version: 0.261.305
+Version: 0.261.323
 Implemented in: 0.261.127
 Group workflow member run/cancel, status gates, delete, and search coverage: 0.261.178
 The workflow editor takes focus and hands it back to Edit on close: 0.261.188
@@ -33,6 +33,9 @@
 
 
 def section(page, label):
+    opener = page.get_by_role("button", name="Workspace sections", exact=True)
+    if opener.is_visible():
+        opener.click()
     page.get_by_role("navigation", name="Workspace sections", exact=True).get_by_role("link", name=label, exact=True).click()
 
 
diff --git a/ui_tests/test_v2_mobile_chat_layout.py b/ui_tests/test_v2_mobile_chat_layout.py
new file mode 100644
index 000000000..659712ee0
--- /dev/null
+++ b/ui_tests/test_v2_mobile_chat_layout.py
@@ -0,0 +1,113 @@
+# test_v2_mobile_chat_layout.py
+"""
+Real-component regressions for V2 mobile composer and conversation actions.
+Version: 0.261.323
+Implemented in: 0.261.323
+
+Only HTTP is stubbed; the production ChatExperience, stores, composer and CSS run
+through the existing harness. Actual iOS keyboard behavior needs a real device.
+"""
+
+from pathlib import Path
+
+import pytest
+from playwright.sync_api import expect
+
+from test_v2_sidebar_conversation_scroll import (
+    editor_assets, editor_browser, connect_options, mount, open_page,  # noqa: F401
+)
+
+
+pytestmark = pytest.mark.ui
+ARTIFACTS = Path(__file__).parent / "artifacts" / "mobile-layout"
+
+
+@pytest.mark.parametrize("width,height,theme", [
+    (320, 740, "light"), (360, 740, "dark"), (393, 852, "light"),
+    (430, 932, "dark"), (768, 1024, "light"), (852, 393, "dark"),
+    (1280, 800, "light"),
+])
+def test_composer_actions_and_tools_remain_reachable(open_page, width, height, theme):
+    page, api = open_page({"width": width, "height": height})
+    mount(page, api, rows=0)
+    page.evaluate("""theme => {
+        document.documentElement.classList.toggle('dark', theme === 'dark');
+        const H = window.OrchHarness;
+        H.stores.bootstrap.useBootstrapStore.setState(state => ({data: {
+            ...state.data, features: {
+                ...state.data.features, enable_speech_to_text_input: true,
+                enable_chat_orchestration: true,
+            }, orchestration: {enabled: true, capabilities: [], default_approval_mode: 'manual'},
+        }}));
+    }""", theme)
+    send = page.get_by_role("button", name="Send message", exact=True)
+    attach = page.get_by_role("button", name="Attach a file", exact=True)
+    voice = page.get_by_role("button", name="Voice input", exact=True)
+    expect(send).to_be_visible()
+    if width < 768:
+        tools = page.get_by_role("button", name="Chat tools", exact=True)
+        expect(tools).to_be_visible()
+        boxes = [control.bounding_box() for control in (tools, voice, attach, send)]
+        assert all(boxes)
+        assert len({round(box["y"]) for box in boxes}) == 1, boxes
+        assert all(box["height"] >= 44 for box in boxes)
+        assert boxes[-1]["x"] + boxes[-1]["width"] <= width
+        expect(page.get_by_role("button", name="Orchestrate", exact=True)).not_to_be_visible()
+        tools.click()
+        orchestration = page.get_by_role("button", name="Orchestrate", exact=True)
+        expect(orchestration).to_have_attribute("aria-pressed", "true")
+        expect(tools).to_contain_text("manual")
+        orchestration.click()
+        expect(orchestration).to_have_attribute("aria-pressed", "false")
+        orchestration.click()
+        expect(tools).to_contain_text("manual")
+        tools.click()
+        expect(send).to_be_visible()
+        expect(page.get_by_role("button", name="Orchestrate", exact=True)).not_to_be_visible()
+    else:
+        expect(page.get_by_role("button", name="Chat tools", exact=True)).not_to_be_visible()
+    assert page.evaluate("document.documentElement.scrollWidth <= innerWidth")
+    ARTIFACTS.mkdir(parents=True, exist_ok=True)
+    page.screenshot(path=str(ARTIFACTS / f"chat-{width}-{theme}.png"))
+
+
+def test_mobile_conversation_actions_and_new_chat_keep_existing_semantics(open_page):
+    page, api = open_page({"width": 393, "height": 852})
+    mount(page, api, rows=0)
+    page.evaluate("""() => {
+        window.OrchHarness.stores.chat.useChatStore.setState({
+            activeConversationId: 'conv-01',
+            conversations: [{id: 'conv-01', title: 'Long conversation title '.repeat(10)}],
+        });
+    }""")
+    expect(page.get_by_role("button", name="Open used documents", exact=True)).not_to_be_visible()
+    page.get_by_role("button", name="Conversation actions", exact=True).click()
+    page.get_by_role("button", name="Open used documents", exact=True).click()
+    expect(page.get_by_role("complementary", name="Conversation details")).to_be_visible()
+    page.get_by_role("button", name="Close panel", exact=True).click()
+    page.get_by_role("button", name="Start a new chat", exact=True).click()
+    expect(page.get_by_role("heading", name="New chat", exact=True)).to_be_visible()
+    assert page.evaluate("window.OrchHarness.stores.chat.useChatStore.getState().activeConversationId") is None
+
+
+def test_large_text_and_classification_banner_keep_mobile_actions_in_bounds(open_page):
+    page, api = open_page({"width": 393, "height": 852})
+    mount(page, api, rows=0)
+    page.evaluate("""() => {
+        document.documentElement.dataset.fontSize = 'xl';
+        const H = window.OrchHarness;
+        H.stores.bootstrap.useBootstrapStore.setState(state => ({data: {
+            ...state.data, branding: {...state.data.branding, classification_banner: {
+                enabled: true, text: 'Internal information - handle according to your organization policy',
+                color: '#123456', text_color: '#ffffff',
+            }},
+            features: {...state.data.features, enable_speech_to_text_input: true},
+        }}));
+    }""")
+    expect(page.locator("#classification-banner")).to_be_visible()
+    for label in ("Open navigation", "Chat tools", "Voice input", "Attach a file", "Send message"):
+        control = page.get_by_role("button", name=label, exact=True)
+        expect(control).to_be_in_viewport()
+        bounds = control.bounding_box()
+        assert bounds and bounds["x"] >= 0 and bounds["x"] + bounds["width"] <= 393
+    assert page.evaluate("document.documentElement.scrollWidth <= innerWidth")
diff --git a/ui_tests/test_v2_mobile_navigation.py b/ui_tests/test_v2_mobile_navigation.py
new file mode 100644
index 000000000..555bbe4ae
--- /dev/null
+++ b/ui_tests/test_v2_mobile_navigation.py
@@ -0,0 +1,78 @@
+# test_v2_mobile_navigation.py
+"""
+Real-component regression tests for the space-saving V2 mobile navigation.
+Version: 0.261.323
+Implemented in: 0.261.323
+
+Reuses production components/CSS and the closed HTTP rail harness. Local Chromium
+and the shared Azure Playwright connection fixture are supported.
+"""
+
+import pytest
+from playwright.sync_api import expect
+
+from test_v2_sidebar_conversation_scroll import (
+    editor_assets, editor_browser, connect_options, mount, open_page,  # noqa: F401
+)
+
+
+pytestmark = pytest.mark.ui
+
+
+@pytest.mark.parametrize("width,height", [
+    (320, 740), (360, 740), (393, 852), (430, 932), (767, 852),
+])
+def test_closed_navigation_reserves_no_phone_width_and_drawer_returns_focus(open_page, width, height):
+    page, api = open_page({"width": width, "height": height})
+    mount(page, api, rows=0)
+    opener = page.get_by_role("button", name="Open navigation", exact=True)
+    expect(opener).to_be_visible()
+    expect(page.get_by_role("navigation", name="Primary", exact=True)).to_have_count(0)
+    main = page.locator(".app-shell main")
+    bounds = main.bounding_box()
+    assert bounds and bounds["x"] == 0 and bounds["width"] == width
+    assert page.evaluate("document.documentElement.scrollWidth <= innerWidth")
+    expect(page.locator("[data-notification-bell]")).to_have_count(1)
+    opener.click()
+    close = page.get_by_role("navigation", name="Primary").get_by_role("button", name="Close navigation")
+    expect(close).to_be_focused()
+    assert main.evaluate("element => element.inert")
+    page.keyboard.press("Shift+Tab")
+    assert page.evaluate("document.getElementById('primary-navigation').contains(document.activeElement)")
+    page.keyboard.press("Escape")
+    expect(opener).to_be_focused()
+    assert not main.evaluate("element => element.inert")
+    opener.click()
+    page.get_by_role("navigation", name="Primary").get_by_role("button", name="New chat", exact=True).click()
+    expect(opener).to_be_visible()
+    expect(page.get_by_role("navigation", name="Primary")).to_have_count(0)
+
+
+def test_resize_keeps_desktop_preference_and_active_conversation(open_page):
+    page, api = open_page()
+    mount(page, api)
+    page.get_by_role("button", name="Collapse navigation", exact=True).click()
+    page.evaluate("""() => window.OrchHarness.stores.chat.useChatStore.setState({
+        activeConversationId: 'conv-01',
+    })""")
+    page.set_viewport_size({"width": 393, "height": 852})
+    page.get_by_role("button", name="Open navigation", exact=True).click()
+    page.keyboard.press("Escape")
+    page.set_viewport_size({"width": 1280, "height": 800})
+    expect(page.get_by_role("button", name="Expand navigation", exact=True)).to_be_visible()
+    bounds = page.get_by_role("navigation", name="Primary").bounding_box()
+    assert bounds and bounds["width"] == 68
+    assert page.evaluate("window.OrchHarness.stores.chat.useChatStore.getState().activeConversationId") == "conv-01"
+
+
+def test_home_uses_one_fallback_header_and_mobile_drawer_scrolls(open_page):
+    page, api = open_page({"width": 393, "height": 393})
+    mount(page, api, experience="HomeExperience", entry="/", rows=0)
+    expect(page.get_by_role("button", name="Open navigation", exact=True)).to_have_count(1)
+    page.get_by_role("button", name="Open navigation", exact=True).click()
+    nav = page.get_by_role("navigation", name="Primary")
+    expect(nav).to_be_visible()
+    region = nav.locator("[data-rail-scroll-region]")
+    assert region.evaluate("element => getComputedStyle(element).overflowY") == "auto"
+    page.keyboard.press("Escape")
+    expect(page.get_by_role("button", name="Open navigation", exact=True)).to_be_focused()
diff --git a/ui_tests/test_v2_mobile_workspace_documents.py b/ui_tests/test_v2_mobile_workspace_documents.py
new file mode 100644
index 000000000..36b2a74d0
--- /dev/null
+++ b/ui_tests/test_v2_mobile_workspace_documents.py
@@ -0,0 +1,91 @@
+# test_v2_mobile_workspace_documents.py
+"""
+Production-SPA mobile workspace/document layout and permission regressions.
+Version: 0.261.323
+Implemented in: 0.261.323
+
+Reuses closed group/public HTTP fixtures and the shared Azure Playwright connection.
+The same explorer renders mobile rows without changing saved desktop columns.
+"""
+
+from pathlib import Path
+import sys
+
+import pytest
+from playwright.sync_api import expect
+
+# Legacy shared fixtures import their connection helpers as top-level modules.
+sys.path.insert(0, str(Path(__file__).parent / "fixtures"))
+
+from ui_tests.fixtures.group_documents import group_documents_ui, connect_options  # noqa: E402, F401
+from ui_tests.fixtures.public_documents import public_documents_ui  # noqa: E402, F401
+from test_v2_personal_document_scope import personal_documents  # noqa: E402, F401
+
+
+pytestmark = pytest.mark.ui
+ARTIFACTS = Path(__file__).parent / "artifacts" / "mobile-layout"
+
+
+@pytest.mark.parametrize("fixture_name,path,theme,width", [
+    ("group_documents_ui", "/groups/group-a/documents", "light", 320),
+    ("group_documents_ui", "/groups/group-a/documents", "dark", 393),
+    ("public_documents_ui", "/public/pub-a/documents", "light", 393),
+    ("public_documents_ui", "/public/pub-a/documents", "dark", 430),
+])
+def test_mobile_documents_fill_pane_with_selectable_readable_rows(request, fixture_name, path, theme, width):
+    ui = request.getfixturevalue(fixture_name)
+    ui.open(path, theme=theme, width=width, height=852)
+    page = ui.page
+    details = page.get_by_role("button", name="Details for Research brief", exact=True)
+    expect(details).to_be_visible()
+    ui.assert_no_overflow()
+    table = page.get_by_role("table")
+    bounds = table.locator("..").bounding_box()
+    assert bounds and bounds["height"] >= 160, bounds
+    assert table.evaluate("element => element.scrollWidth <= element.clientWidth + 1")
+    expect(page.get_by_role("navigation", name="Workspace sections", exact=True)).not_to_be_visible()
+    expect(page.get_by_role("button", name="Workspace sections", exact=True)).to_contain_text("Documents")
+    checkbox = page.get_by_role("checkbox", name="Select Research brief", exact=True)
+    expect(checkbox).to_be_visible()
+    checkbox.check()
+    expect(page.get_by_text("1 selected", exact=False)).to_be_visible()
+    expect(page.get_by_role("button", name="Upload", exact=True)).to_have_count(0)
+    view_options = page.get_by_role("button", name="Document view options", exact=True)
+    view_options.click()
+    expect(page.get_by_role("combobox", name="Sort documents", exact=True)).to_be_visible()
+    expect(page.get_by_role("button", name="Tiles view", exact=True)).to_be_visible()
+    view_options.click()
+    ARTIFACTS.mkdir(parents=True, exist_ok=True)
+    page.screenshot(path=str(ARTIFACTS / f"{fixture_name}-{width}-{theme}.png"))
+    details.click()
+    panel = page.get_by_role("dialog", name="Document details", exact=True)
+    expect(panel).to_be_visible()
+    expect(panel).to_contain_text("Research brief")
+    panel.get_by_role("button", name="Close", exact=True).click()
+    opener = page.get_by_role("button", name="Workspace sections", exact=True)
+    opener.click()
+    page.get_by_role("navigation", name="Workspace sections").get_by_role("link", name="Overview", exact=True).click()
+    expect(page.get_by_role("navigation", name="Workspace sections")).not_to_be_visible()
+    expect(opener).to_contain_text("Overview")
+    ui.assert_no_overflow()
+
+
+def test_rotation_keeps_desktop_document_columns_and_preferences(group_documents_ui):
+    ui = group_documents_ui
+    ui.open("/groups/group-a/documents", width=393, height=852)
+    expect(ui.page.get_by_role("button", name="Details for Research brief", exact=True)).to_be_visible()
+    ui.page.set_viewport_size({"width": 1440, "height": 900})
+    expect(ui.page.get_by_role("columnheader", name="Modified", exact=False)).to_be_visible()
+    expect(ui.page.get_by_role("navigation", name="Workspace sections")).to_be_visible()
+    assert ui.preferences["v2DocumentsPrefs"]["columns"] == ["name", "tags", "status", "modified", "size"]
+
+
+def test_personal_mobile_documents_keep_personal_scope_and_upload(personal_documents):
+    ui = personal_documents
+    ui.open("/workspace/documents", width=393, height=852)
+    expect(ui.page.get_by_role("button", name="Details for Personal Alpha", exact=True)).to_be_visible()
+    expect(ui.page.get_by_role("button", name="Upload", exact=True)).to_be_visible()
+    ui.page.get_by_role("checkbox", name="Select Personal Alpha", exact=True).check()
+    expect(ui.page.get_by_role("combobox", name="Document actions")).to_be_enabled()
+    ui.assert_no_overflow()
+    assert not [entry for entry in ui.requests if entry.path.startswith("/api/group_documents")]
diff --git a/ui_tests/test_v2_orchestration_planning_retry.py b/ui_tests/test_v2_orchestration_planning_retry.py
index 43bee4472..a0cf65f8c 100644
--- a/ui_tests/test_v2_orchestration_planning_retry.py
+++ b/ui_tests/test_v2_orchestration_planning_retry.py
@@ -1,7 +1,7 @@
 # test_v2_orchestration_planning_retry.py
 """
 Browser regressions for failed, unpersisted orchestration planning turns.
-Version: 0.261.317
+Version: 0.261.323
 Implemented in: 0.261.115
 Leaving a planning turn for a new chat also releases its Thinking state and Stop: 0.261.226
 
@@ -388,35 +388,38 @@ def test_analysis_shell_responsive_navigation_does_not_widen_the_page(planning_u
         }""",
         CONVERSATION,
     )
-    expect(page.get_by_role("navigation", name="Primary")).to_be_visible()
-    expand = page.get_by_role("button", name="Expand navigation", exact=True)
+    expand = page.get_by_role("button", name="Open navigation" if width < 768 else "Expand navigation", exact=True)
     if expand.is_visible():
         expand.click()
-    expect(page.get_by_role("button", name="Collapse navigation", exact=True)).to_be_visible()
+    close_name = "Close navigation" if width < 768 else "Collapse navigation"
+    close = page.get_by_role("navigation", name="Primary").get_by_role("button", name=close_name, exact=True)
+    expect(close).to_be_visible()
     dimensions = page.evaluate("({viewport: innerWidth, document: document.documentElement.scrollWidth})")
     assert dimensions["document"] <= width + 1, dimensions
-    page.get_by_role("button", name="Collapse navigation", exact=True).click()
+    close.click()
     button = page.get_by_role("button", name="Download CSV", exact=True)
     button.scroll_into_view_if_needed()
     box = button.bounding_box()
     assert box and box["x"] >= 0 and box["x"] + box["width"] <= width + 1
     assert page.evaluate("document.documentElement.scrollWidth <= innerWidth + 1")
+    if width < 768:
+        page.get_by_role("button", name="Conversation actions", exact=True).click()
     page.get_by_role("button", name="Open used documents", exact=True).click()
     expect(page.get_by_role("complementary", name="Conversation details")).to_be_visible()
     expect(page.get_by_role("button", name="Close panel", exact=True)).to_be_in_viewport()
     assert page.evaluate("document.documentElement.scrollWidth <= innerWidth + 1")
     page.get_by_role("button", name="Close panel", exact=True).click()
     if width == 390:
-        expand = page.get_by_role("button", name="Expand navigation", exact=True)
+        expand = page.get_by_role("button", name="Open navigation", exact=True)
         expand.focus()
         expand.press("Enter")
-        expect(page.get_by_role("button", name="Collapse navigation", exact=True)).to_be_focused()
+        expect(page.get_by_role("navigation", name="Primary").get_by_role("button", name="Close navigation", exact=True)).to_be_focused()
         assert page.evaluate("document.querySelector('nav[aria-label=\"Primary\"]').parentElement.querySelector('main').inert")
         page.keyboard.press("Escape")
         expect(expand).to_be_focused()
-        assert not page.evaluate("document.querySelector('nav[aria-label=\"Primary\"]').parentElement.querySelector('main').inert")
+        assert not page.evaluate("document.querySelector('.app-shell main').inert")
         expand.click()
-        page.get_by_role("button", name="Close navigation", exact=True).click(position={"x": width - 10, "y": 100})
+        page.locator(".app-shell > div > button[aria-label='Close navigation']").click(position={"x": width - 10, "y": 100})
         expect(expand).to_be_visible()
         assert not [
             call for call in api.calls("/api/user/settings")
@@ -439,12 +442,12 @@ def test_mobile_share_dialog_does_not_remain_inside_inert_chat(planning_ui):
         H.unmount('mount-a');
         H.mount('mount-a', 'ChatExperience', {}, {initialEntries: ['/chat']});
     }""", api.conversations)
-    page.get_by_role("button", name="Expand navigation", exact=True).click()
+    page.get_by_role("button", name="Open navigation", exact=True).click()
     page.get_by_role("button", name="Actions for Shared review", exact=True).click()
     page.get_by_role("button", name="Share", exact=True).click()
     panel = page.get_by_role("dialog", name="Conversation participants")
     expect(panel).to_be_visible()
-    expect(page.get_by_role("button", name="Expand navigation", exact=True)).to_be_visible()
+    expect(page.get_by_role("button", name="Open navigation", exact=True)).to_be_visible()
     search = panel.get_by_role("searchbox", name="Search for people to add")
     search.focus()
     expect(search).to_be_focused()
diff --git a/ui_tests/test_v2_public_journeys.py b/ui_tests/test_v2_public_journeys.py
index 78bc10c14..da3025de1 100644
--- a/ui_tests/test_v2_public_journeys.py
+++ b/ui_tests/test_v2_public_journeys.py
@@ -2,7 +2,7 @@
 """M11 public end-to-end journeys: the role x status x File-Sync matrix, mid-session
 transitions, Settings activation and the classic handoff, driven through the real SPA.
 
-Version: 0.261.188
+Version: 0.261.323
 Implemented in: 0.261.185
 The classic handoff follows the Documents header's renamed Classic tools button: 0.261.188
 A locked overview entry is outlined, never faded, and its text stays readable: 0.261.188
@@ -82,6 +82,9 @@ def rail_enabled(context, sectionId):
 
 
 def section(page, label):
+    opener = page.get_by_role("button", name="Workspace sections", exact=True)
+    if opener.is_visible():
+        opener.click()
     page.get_by_role("navigation", name="Workspace sections", exact=True).get_by_role(
         "link", name=label, exact=True).click()
 
diff --git a/ui_tests/test_v2_shared_workspace_overview_counts.py b/ui_tests/test_v2_shared_workspace_overview_counts.py
index a02cdc68f..ec0fa92d8 100644
--- a/ui_tests/test_v2_shared_workspace_overview_counts.py
+++ b/ui_tests/test_v2_shared_workspace_overview_counts.py
@@ -1,7 +1,7 @@
 # test_v2_shared_workspace_overview_counts.py
 """
 Real-SPA regression tests for group/public overview counts.
-Version: 0.261.313
+Version: 0.261.323
 Implemented in: 0.261.310
 
 Uses the established Azure Playwright-compatible connection fixture and closed
@@ -171,6 +171,9 @@ def badge(ui, section, count):
 
 
 def nav(ui, label):
+    opener = ui.page.get_by_role("button", name="Workspace sections", exact=True)
+    if opener.is_visible():
+        opener.click()
     ui.page.get_by_role("navigation", name="Workspace sections", exact=True).get_by_role("link", name=label, exact=True).click()
 
 
diff --git a/ui_tests/test_v2_sidebar_conversation_scroll.py b/ui_tests/test_v2_sidebar_conversation_scroll.py
index e09c9b0e5..af75e6990 100644
--- a/ui_tests/test_v2_sidebar_conversation_scroll.py
+++ b/ui_tests/test_v2_sidebar_conversation_scroll.py
@@ -1,7 +1,7 @@
 # test_v2_sidebar_conversation_scroll.py
 """
 Browser regressions for the V2 chat rail scrolling as one panel.
-Version: 0.261.236
+Version: 0.261.323
 Implemented in: 0.261.236
 
 On the chat page, the rail kept its whole height for the navigation and the administrator's
@@ -87,6 +87,8 @@
         },
         footer: box(nav.querySelector('button[aria-label^="Switch to"]')),
         rows: rows.length,
+        rowPitch: rows.length > 1
+            ? rows[1].getBoundingClientRect().top - rows[0].getBoundingClientRect().top : 0,
         visible,
         scrollers: scrollers.length,
         regionScrolls: scrollers.length === 1 && scrollers[0] === region,
@@ -297,8 +299,8 @@ def geometry(page):
 
 def wheel_rail(page, delta):
     """Scroll with the wheel over the conversation list, the way a reader does."""
-    box = header(page).bounding_box()
-    page.mouse.move(box["x"] + 80, box["y"] + box["height"] + 40)
+    box = page.locator("[data-rail-scroll-region]").bounding_box()
+    page.mouse.move(box["x"] + 80, box["y"] + box["height"] / 2)
     page.mouse.wheel(0, delta)
     page.evaluate(SETTLE)
 
@@ -517,7 +519,7 @@ def test_the_phone_drawer_holds_search_under_new_chat(open_page):
     mount(page, api, rows=0)
     expect(search_box(page)).to_have_count(0)
 
-    page.get_by_role("button", name="Expand navigation", exact=True).click()
+    page.get_by_role("button", name="Open navigation", exact=True).click()
     expect(row_items(page)).to_have_count(PAGE_SIZE)
     wheel_rail(page, 900)
     expect(header(page)).to_have_attribute("data-stuck", "")
@@ -525,10 +527,15 @@ def test_the_phone_drawer_holds_search_under_new_chat(open_page):
     assert held["regionScrolls"], held
     assert held["chats"]["bottom"] <= held["region"]["top"]
     assert held_under_new_chat(held), held
-    assert held["visible"] >= 10, held["visible"]
+    row_buttons = row_items(page).first.get_by_role("button", name="Conversation 00", exact=True)
+    assert row_buttons.bounding_box()["height"] >= 44
+    available_height = held["region"]["bottom"] - held["header"]["bottom"]
+    # Touch targets are larger than desktop rows; only an edge row may be partial.
+    capacity = int(available_height // held["rowPitch"])
+    assert held["visible"] >= capacity - 1 and capacity >= 8, held
 
     page.keyboard.press("Escape")
-    expect(page.get_by_role("button", name="Expand navigation", exact=True)).to_be_visible()
+    expect(page.get_by_role("button", name="Open navigation", exact=True)).to_be_focused()
 
 
 @pytest.mark.parametrize("theme", ["light", "dark"])

From 9aef8cc10ba00f0bd678bcac46761588cfcbd412 Mon Sep 17 00:00:00 2001
From: Paul Lizer <paullizer@microsoft.com>
Date: Sun, 11 Oct 2026 11:49:31 -0400
Subject: [PATCH 2/2] Register shared mobile UI fixtures explicitly

Replace unused fixture imports with pytest plugin registration while preserving standalone test discovery. Address CodeQL review feedback and record version 0.261.324.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 application/single_app/config.py               |  2 +-
 docs/explanation/fixes/V2_MOBILE_LAYOUT_FIX.md |  8 ++++++++
 ui_tests/test_v2_mobile_chat_layout.py         |  8 ++++----
 ui_tests/test_v2_mobile_navigation.py          |  8 ++++----
 ui_tests/test_v2_mobile_workspace_documents.py | 10 ++++++----
 5 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/application/single_app/config.py b/application/single_app/config.py
index d18d6d66e..552f64f04 100644
--- a/application/single_app/config.py
+++ b/application/single_app/config.py
@@ -101,7 +101,7 @@
 EXECUTOR_TYPE = 'thread'
 EXECUTOR_MAX_WORKERS = 30
 SESSION_TYPE = 'filesystem'
-VERSION = "0.261.323"
+VERSION = "0.261.324"
 IS_DEVELOPMENT = is_development_env_enabled()
 
 # Opt-out for deployments where App Service Easy Auth is active but the platform
diff --git a/docs/explanation/fixes/V2_MOBILE_LAYOUT_FIX.md b/docs/explanation/fixes/V2_MOBILE_LAYOUT_FIX.md
index ff3cc53f2..ada6a0e97 100644
--- a/docs/explanation/fixes/V2_MOBILE_LAYOUT_FIX.md
+++ b/docs/explanation/fixes/V2_MOBILE_LAYOUT_FIX.md
@@ -39,6 +39,14 @@ mobile routes, new settings, dependencies, or authorization changes are added.
 
 ## Validation
 
+### Explicit fixture registration (0.261.324)
+
+The mobile UI tests reuse pytest fixtures that pytest discovers by module-level
+name, not by direct calls. PR #1750's unused-import feedback is addressed by
+explicit `pytest_plugins` registration, retaining standalone fixture discovery
+without unused `from` imports. This test-maintenance follow-up is recorded in
+`application/single_app/config.py`; mobile application behavior is unchanged.
+
 Regression coverage is in `functional_tests/test_v2_mobile_layout.py` and
 `ui_tests/test_v2_mobile_navigation.py`,
 `ui_tests/test_v2_mobile_chat_layout.py`, and
diff --git a/ui_tests/test_v2_mobile_chat_layout.py b/ui_tests/test_v2_mobile_chat_layout.py
index 659712ee0..8d500165f 100644
--- a/ui_tests/test_v2_mobile_chat_layout.py
+++ b/ui_tests/test_v2_mobile_chat_layout.py
@@ -1,7 +1,7 @@
 # test_v2_mobile_chat_layout.py
 """
 Real-component regressions for V2 mobile composer and conversation actions.
-Version: 0.261.323
+Version: 0.261.324
 Implemented in: 0.261.323
 
 Only HTTP is stubbed; the production ChatExperience, stores, composer and CSS run
@@ -13,9 +13,9 @@
 import pytest
 from playwright.sync_api import expect
 
-from test_v2_sidebar_conversation_scroll import (
-    editor_assets, editor_browser, connect_options, mount, open_page,  # noqa: F401
-)
+from test_v2_sidebar_conversation_scroll import mount
+
+pytest_plugins = ("test_v2_sidebar_conversation_scroll",)
 
 
 pytestmark = pytest.mark.ui
diff --git a/ui_tests/test_v2_mobile_navigation.py b/ui_tests/test_v2_mobile_navigation.py
index 555bbe4ae..3bd0bbcf5 100644
--- a/ui_tests/test_v2_mobile_navigation.py
+++ b/ui_tests/test_v2_mobile_navigation.py
@@ -1,7 +1,7 @@
 # test_v2_mobile_navigation.py
 """
 Real-component regression tests for the space-saving V2 mobile navigation.
-Version: 0.261.323
+Version: 0.261.324
 Implemented in: 0.261.323
 
 Reuses production components/CSS and the closed HTTP rail harness. Local Chromium
@@ -11,9 +11,9 @@
 import pytest
 from playwright.sync_api import expect
 
-from test_v2_sidebar_conversation_scroll import (
-    editor_assets, editor_browser, connect_options, mount, open_page,  # noqa: F401
-)
+from test_v2_sidebar_conversation_scroll import mount
+
+pytest_plugins = ("test_v2_sidebar_conversation_scroll",)
 
 
 pytestmark = pytest.mark.ui
diff --git a/ui_tests/test_v2_mobile_workspace_documents.py b/ui_tests/test_v2_mobile_workspace_documents.py
index 36b2a74d0..ffd2af339 100644
--- a/ui_tests/test_v2_mobile_workspace_documents.py
+++ b/ui_tests/test_v2_mobile_workspace_documents.py
@@ -1,7 +1,7 @@
 # test_v2_mobile_workspace_documents.py
 """
 Production-SPA mobile workspace/document layout and permission regressions.
-Version: 0.261.323
+Version: 0.261.324
 Implemented in: 0.261.323
 
 Reuses closed group/public HTTP fixtures and the shared Azure Playwright connection.
@@ -17,9 +17,11 @@
 # Legacy shared fixtures import their connection helpers as top-level modules.
 sys.path.insert(0, str(Path(__file__).parent / "fixtures"))
 
-from ui_tests.fixtures.group_documents import group_documents_ui, connect_options  # noqa: E402, F401
-from ui_tests.fixtures.public_documents import public_documents_ui  # noqa: E402, F401
-from test_v2_personal_document_scope import personal_documents  # noqa: E402, F401
+pytest_plugins = (
+    "ui_tests.fixtures.group_documents",
+    "ui_tests.fixtures.public_documents",
+    "test_v2_personal_document_scope",
+)
 
 
 pytestmark = pytest.mark.ui