From 36e039c656ad0a2320173bdf923c00481ab89d7e Mon Sep 17 00:00:00 2001
From: pythonlearner1025 <mjsong2021@gmail.com>
Date: Sat, 5 Sep 2026 22:55:31 -0700
Subject: [PATCH] fix(mobile): the session rail is the workspace's screen, not
 a drawer

Below 900px the rail slid in at min(88vw, 348px) over the chat, behind a
scrim. It now fills the width, and a workspace opens on it. Picking a
session hides it, so the pick reads as a page change.

Four more phone defects go with it:

- Create workspace opened at z-index 100 under the rail's z-index 400.
  Its handler now closes the rail first, like its five siblings.
- The create-workspace footer was pinned and ate 70px of every screen.
  Its buttons also hugged the right edge, because the base rule's
  justify-content survived the mobile override. The dialog now scrolls as
  one page, the header sticks, and the buttons end the form.
- The member row is an eight-column grid that dropped to three columns at
  620px, so five children auto-placed into 28px columns and overlapped.
  The four machine controls now share one wrapper: display: contents on
  desktop, a wrapped band on a phone.
- The scrim can no longer cover anything, so it is deleted rather than
  hidden.

Desktop does not move. Every edit sits inside an existing mobile media
query or behind mobileWebApp, and test/mobile-only-styles.test.ts proves
it by parsing the stylesheets.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019ZvBaFqU4mgX75HAbiYJYV
---
 packages/webapp/src/CloudApp.tsx              |  11 +-
 .../webapp/src/WorkspaceMembersEditor.tsx     |  80 ++++++-------
 .../webapp/src/create-workspace-dialog.css    |   8 ++
 packages/webapp/src/shell/ShellNav.tsx        |  81 ++++++-------
 packages/webapp/src/shell/mobile-rail.ts      |   7 ++
 packages/webapp/src/strip-rail.css            |  14 +--
 .../webapp/src/workspace-details-dialog.css   |  16 ++-
 .../test/WorkspaceDetailsDialog.test.tsx      |   6 +
 .../webapp/test/mobile-only-styles.test.ts    | 110 ++++++++++++++++++
 .../webapp/test/mobile-rail-route.test.ts     |  28 +++++
 .../webapp/test/shell-mobile-drawer.test.tsx  |  21 ++--
 packages/webapp/test/shell-smoke.test.tsx     |  53 +++++++++
 12 files changed, 323 insertions(+), 112 deletions(-)
 create mode 100644 packages/webapp/src/shell/mobile-rail.ts
 create mode 100644 packages/webapp/test/mobile-only-styles.test.ts
 create mode 100644 packages/webapp/test/mobile-rail-route.test.ts

diff --git a/packages/webapp/src/CloudApp.tsx b/packages/webapp/src/CloudApp.tsx
index 64742a45..cb328114 100644
--- a/packages/webapp/src/CloudApp.tsx
+++ b/packages/webapp/src/CloudApp.tsx
@@ -35,6 +35,7 @@ import { AccessApprovalDialog } from './AccessApprovalDialog';
 import { useAccessProposals } from './use-access-proposals';
 import type { ConnectionsFocus, WorkspaceDetailsTab } from './WorkspaceDetailsDialog';
 import { ShellNav } from './shell/ShellNav';
+import { routeShowsMobileRail } from './shell/mobile-rail';
 import { isSecondaryRoute, SecondaryRoutes } from './shell/SecondaryRoutes';
 import { NewTabControl } from './shell/NewTabControl';
 import { WorkPanes } from './shell/WorkPanes';
@@ -283,9 +284,10 @@ function CloudAppContent({ client, resolver }: CloudAppProps) {
     if (!mobileWebApp) setDrawerOpen(false);
   }, [mobileWebApp]);
 
+  const railIsWorkspaceScreen = routeShowsMobileRail(route);
   useEffect(() => {
-    setDrawerOpen(false);
-  }, [route.page, route.workspaceId]);
+    setDrawerOpen(mobileWebApp && railIsWorkspaceScreen);
+  }, [mobileWebApp, railIsWorkspaceScreen, route.workspaceId]);
 
   useEffect(() => {
     if (!mobileWebApp) return;
@@ -1685,7 +1687,10 @@ function CloudAppContent({ client, resolver }: CloudAppProps) {
         if (mobileWebApp) setDrawerOpen(false);
         setDetails({ workspaceId, tab: 'members', focusAddMember: true });
       }}
-      onCreateWorkspace={() => setShowCreateWorkspace(true)}
+      onCreateWorkspace={() => {
+        if (mobileWebApp) setDrawerOpen(false);
+        setShowCreateWorkspace(true);
+      }}
       onOpenSettings={() => navigateToSettings('profile')}
       onSelectSession={selectTtydSession}
       onCloseSession={closeTtydSession}
diff --git a/packages/webapp/src/WorkspaceMembersEditor.tsx b/packages/webapp/src/WorkspaceMembersEditor.tsx
index 816b8d25..706650e8 100644
--- a/packages/webapp/src/WorkspaceMembersEditor.tsx
+++ b/packages/webapp/src/WorkspaceMembersEditor.tsx
@@ -248,47 +248,49 @@ function MemberRow({
           }}
         />
       )}
-      {showMachine && <MachineStateChip machine={machine} pendingAction={pendingAction} />}
-      {showMachine && (
-        <MachineTypeSelect
-          machines={machines}
-          value={machineTypeId}
-          defaultMachineTypeId={defaultMachineTypeId}
-          volumeLocation={machineLocation(machine, machines)}
-          ariaLabel={`Machine type for ${name}`}
-          disabled={rowBusy}
-          onChange={onMachineTypeChange}
-        />
-      )}
-      {showVolume && (machine === null ? (
-        <label className="workspace-member-volume">
-          <input
-            type="checkbox"
-            aria-label={`Persistent volume for ${name}`}
-            checked={persistentVolume}
+      <div className="workspace-member-machine">
+        {showMachine && <MachineStateChip machine={machine} pendingAction={pendingAction} />}
+        {showMachine && (
+          <MachineTypeSelect
+            machines={machines}
+            value={machineTypeId}
+            defaultMachineTypeId={defaultMachineTypeId}
+            volumeLocation={machineLocation(machine, machines)}
+            ariaLabel={`Machine type for ${name}`}
             disabled={rowBusy}
-            onChange={(event) => onPersistentVolumeChange(event.currentTarget.checked)}
+            onChange={onMachineTypeChange}
           />
-          <span>Persistent volume</span>
-        </label>
-      ) : (
-        // The disk exists, so the row reports it instead of offering a choice
-        // this route cannot make: how full it is, or that there is none.
-        <VolumeMeter volumeId={machine.volumeId} usedPercent={machine.volumeUsedPercent} />
-      ))}
-      {showMachine && actions.length > 0 && (
-        <WebAppSelectMenu
-          ariaLabel={`Machine actions for ${name}`}
-          className="workspace-member-actions"
-          value=""
-          prefix="⋯"
-          options={actions.map((action) => ({ value: action, label: MACHINE_ACTION_LABELS[action] }))}
-          onChange={(next) => {
-            // SAFETY: the options are exactly the MachineAction values above.
-            onMachineAction?.(next as MachineAction);
-          }}
-        />
-      )}
+        )}
+        {showVolume && (machine === null ? (
+          <label className="workspace-member-volume">
+            <input
+              type="checkbox"
+              aria-label={`Persistent volume for ${name}`}
+              checked={persistentVolume}
+              disabled={rowBusy}
+              onChange={(event) => onPersistentVolumeChange(event.currentTarget.checked)}
+            />
+            <span>Persistent volume</span>
+          </label>
+        ) : (
+          // The disk exists, so the row reports it instead of offering a choice
+          // this route cannot make: how full it is, or that there is none.
+          <VolumeMeter volumeId={machine.volumeId} usedPercent={machine.volumeUsedPercent} />
+        ))}
+        {showMachine && actions.length > 0 && (
+          <WebAppSelectMenu
+            ariaLabel={`Machine actions for ${name}`}
+            className="workspace-member-actions"
+            value=""
+            prefix="⋯"
+            options={actions.map((action) => ({ value: action, label: MACHINE_ACTION_LABELS[action] }))}
+            onChange={(next) => {
+              // SAFETY: the options are exactly the MachineAction values above.
+              onMachineAction?.(next as MachineAction);
+            }}
+          />
+        )}
+      </div>
       {!readOnly && !pinned && (
         <button
           className="workspace-member-remove"
diff --git a/packages/webapp/src/create-workspace-dialog.css b/packages/webapp/src/create-workspace-dialog.css
index 77af5f83..ab8dc8dd 100644
--- a/packages/webapp/src/create-workspace-dialog.css
+++ b/packages/webapp/src/create-workspace-dialog.css
@@ -491,16 +491,23 @@
     width: 100%;
     height: 100dvh;
     min-height: 0;
+    overflow-y: auto;
     border: 0;
   }
 
   .create-workspace-main {
+    flex: none;
     gap: 24px;
     padding: 18px 14px;
+    overflow: visible;
   }
 
   .create-workspace-header {
+    position: sticky;
+    z-index: 1;
+    top: 0;
     padding-left: 12px;
+    background: var(--surface-2);
   }
 
   .create-workspace-header__title {
@@ -525,6 +532,7 @@
 
   .create-workspace-actions {
     display: grid;
+    justify-content: stretch;
     gap: 9px;
     padding: 12px 14px;
   }}
diff --git a/packages/webapp/src/shell/ShellNav.tsx b/packages/webapp/src/shell/ShellNav.tsx
index b89ddfc0..017b0773 100644
--- a/packages/webapp/src/shell/ShellNav.tsx
+++ b/packages/webapp/src/shell/ShellNav.tsx
@@ -48,7 +48,9 @@ export type ShellNavProps = {
 
 /** Columns one and two of the shell. Above the mobile breakpoint this is
  * `display: contents`, so the strip and the rail are real grid children of the
- * shell; below it the wrapper becomes the off-canvas drawer and carries both. */
+ * shell; below it the wrapper becomes the workspace's own full-width screen and
+ * carries both. It covers the whole viewport there, so there is no scrim: the
+ * strip's own close button and the Escape key are what dismiss it. */
 export function ShellNav({
   workspaces,
   viewer,
@@ -81,49 +83,40 @@ export function ShellNav({
   onCloseDrawer,
 }: ShellNavProps) {
   return (
-    <>
-      <div className={`shell-nav${drawerOpen ? ' shell-nav--open' : ''}`}>
-        <WorkspaceStrip
-          workspaces={workspaces}
-          viewer={viewer}
-          activeWorkspaceId={activeWorkspaceId}
-          onSelectWorkspace={onSelectWorkspace}
-          onRenameWorkspace={onRenameWorkspace}
-          onOpenWorkspaceSettings={onOpenWorkspaceSettings}
-          onInviteToWorkspace={onInviteToWorkspace}
-          onCreateWorkspace={onCreateWorkspace}
-          onOpenSettings={onOpenSettings}
-          onCloseDrawer={onCloseDrawer}
-        />
-        {showRail && (
-          <SessionRail
-            workspace={activeWorkspace}
-            sessions={sessions}
-            activeSessionId={activeSessionId}
-            livePorts={livePorts}
-            previewLinks={previewLinks}
-            {...(onVendorHost === undefined ? {} : { onVendorHost })}
-            {...(sessionsNeedNewerMachine === undefined ? {} : { sessionsNeedNewerMachine })}
-            {...(sessionsNeedMachine === undefined ? {} : { sessionsNeedMachine })}
-            {...(sessionsStalled === undefined ? {} : { sessionsStalled })}
-            onSelectSession={onSelectSession}
-            onCloseSession={onCloseSession}
-            onSpawnSession={onSpawnSession}
-            onOpenPreview={onOpenPreview}
-            onOpenPreviewLink={onOpenPreviewLink}
-            onOpenMembers={onOpenWorkspaceMembers}
-            onOpenDetails={onOpenWorkspaceDetails}
-            onOpenMachine={onOpenWorkspaceMachine}
-          />
-        )}
-      </div>
-      <button
-        className={`shell-nav-scrim${drawerOpen ? ' shell-nav-scrim--open' : ''}`}
-        type="button"
-        aria-label="Close navigation"
-        tabIndex={-1}
-        onClick={onCloseDrawer}
+    <div className={`shell-nav${drawerOpen ? ' shell-nav--open' : ''}`}>
+      <WorkspaceStrip
+        workspaces={workspaces}
+        viewer={viewer}
+        activeWorkspaceId={activeWorkspaceId}
+        onSelectWorkspace={onSelectWorkspace}
+        onRenameWorkspace={onRenameWorkspace}
+        onOpenWorkspaceSettings={onOpenWorkspaceSettings}
+        onInviteToWorkspace={onInviteToWorkspace}
+        onCreateWorkspace={onCreateWorkspace}
+        onOpenSettings={onOpenSettings}
+        onCloseDrawer={onCloseDrawer}
       />
-    </>
+      {showRail && (
+        <SessionRail
+          workspace={activeWorkspace}
+          sessions={sessions}
+          activeSessionId={activeSessionId}
+          livePorts={livePorts}
+          previewLinks={previewLinks}
+          {...(onVendorHost === undefined ? {} : { onVendorHost })}
+          {...(sessionsNeedNewerMachine === undefined ? {} : { sessionsNeedNewerMachine })}
+          {...(sessionsNeedMachine === undefined ? {} : { sessionsNeedMachine })}
+          {...(sessionsStalled === undefined ? {} : { sessionsStalled })}
+          onSelectSession={onSelectSession}
+          onCloseSession={onCloseSession}
+          onSpawnSession={onSpawnSession}
+          onOpenPreview={onOpenPreview}
+          onOpenPreviewLink={onOpenPreviewLink}
+          onOpenMembers={onOpenWorkspaceMembers}
+          onOpenDetails={onOpenWorkspaceDetails}
+          onOpenMachine={onOpenWorkspaceMachine}
+        />
+      )}
+    </div>
   );
 }
diff --git a/packages/webapp/src/shell/mobile-rail.ts b/packages/webapp/src/shell/mobile-rail.ts
new file mode 100644
index 00000000..fe39f3ab
--- /dev/null
+++ b/packages/webapp/src/shell/mobile-rail.ts
@@ -0,0 +1,7 @@
+import type { AppRoute } from '../sessions-page-state';
+
+/** On a phone the rail is the workspace's screen, so picking a session must
+ * read as a page change. */
+export function routeShowsMobileRail(route: AppRoute): boolean {
+  return route.page === 'webApp' && route.chat === 'landing';
+}
diff --git a/packages/webapp/src/strip-rail.css b/packages/webapp/src/strip-rail.css
index d8a07971..21fe3fc0 100644
--- a/packages/webapp/src/strip-rail.css
+++ b/packages/webapp/src/strip-rail.css
@@ -8,7 +8,6 @@
    rail are real children of the shell grid. Below it, it is the drawer. */
 .shell-nav { display: contents; }
 
-.shell-nav-scrim,
 .shell-strip__close { display: none; }
 
 /* --------------------------------------------------------------- column 1 */
@@ -543,7 +542,7 @@
     top: var(--mobile-viewport-top, 0);
     left: 0;
     display: flex;
-    width: min(88vw, 348px);
+    width: 100%;
     height: var(--mobile-viewport-height, 100dvh);
     background: var(--paper);
     transform: translateX(-102%);
@@ -578,17 +577,6 @@
 
   .shell-new,
   .shell-s { min-height: 40px; }
-
-  .shell-nav-scrim {
-    position: fixed;
-    z-index: 380;
-    inset: 0;
-    display: none;
-    border: 0;
-    background: color-mix(in oklab, var(--paper) 68%, transparent);
-  }
-
-  .shell-nav-scrim--open { display: block; }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/packages/webapp/src/workspace-details-dialog.css b/packages/webapp/src/workspace-details-dialog.css
index 7daaaf60..eb4a8a3a 100644
--- a/packages/webapp/src/workspace-details-dialog.css
+++ b/packages/webapp/src/workspace-details-dialog.css
@@ -118,6 +118,7 @@
 .workspace-members-empty { margin: 14px 12px; color: var(--faint); font-size: 11px; }
 
 .workspace-member-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto auto auto 28px; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-bottom: 0; }
+.workspace-member-machine { display: contents; }
 .workspace-member-row + .workspace-member-row { border-top: 1px solid var(--mod-8); }
 .workspace-member-name { display: grid; min-width: 0; gap: 2px; }
 .workspace-member-name strong,
@@ -207,9 +208,18 @@
   /* Two classes, so this beats the untabbed override further down whatever
      the source order. */
   .workspace-details-dialog.my-machine-dialog { height: auto; max-height: calc(100dvh - 24px); }
-  /* The row keeps the avatar, the name and the remove control; the selects
-   * and the chip wrap under them rather than squeeze. */
-  .workspace-member-row { grid-template-columns: 28px minmax(0, 1fr) 28px; }
+  /* The first row keeps the person controls. Machine controls wrap in a band
+   * below them rather than auto-placing into narrow columns. */
+  .workspace-member-row { grid-template-columns: 28px minmax(0, 1fr) auto 28px; }
+  .workspace-member-machine {
+    display: flex;
+    order: 1;
+    grid-column: 1 / -1;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 0 0 10px 38px;
+  }
 }
 
 /* The compact machine-type select sits in a member row, so it takes its
diff --git a/packages/webapp/test/WorkspaceDetailsDialog.test.tsx b/packages/webapp/test/WorkspaceDetailsDialog.test.tsx
index eece959f..ffa0a63e 100644
--- a/packages/webapp/test/WorkspaceDetailsDialog.test.tsx
+++ b/packages/webapp/test/WorkspaceDetailsDialog.test.tsx
@@ -223,6 +223,12 @@ describe('WorkspaceDetailsDialog', () => {
     // The machine state chip, and the type select on the member who holds one.
     expect(view.container.textContent).toContain('running');
     expect(view.container.querySelector('[aria-label="Machine type for Ada Owner"]')).not.toBeNull();
+    const machineBand = view.container.querySelector('.workspace-member-machine');
+    expect(machineBand, 'member machine controls must share one mobile band').not.toBeNull();
+    expect(machineBand?.querySelector('.machine-chip')).not.toBeNull();
+    expect(machineBand?.querySelector('[aria-label="Machine type for Ada Owner"]')).not.toBeNull();
+    expect(machineBand?.querySelector('[role="meter"]')).not.toBeNull();
+    expect(machineBand?.querySelector('[aria-label="Machine actions for Ada Owner"]')).not.toBeNull();
     // A viewer never holds a machine (§2.2), so no type select and no menu.
     expect(view.container.querySelector('[aria-label="Machine type for Grace Viewer"]')).toBeNull();
     expect(view.container.querySelector('[aria-label="Machine actions for Grace Viewer"]')).toBeNull();
diff --git a/packages/webapp/test/mobile-only-styles.test.ts b/packages/webapp/test/mobile-only-styles.test.ts
new file mode 100644
index 00000000..319da305
--- /dev/null
+++ b/packages/webapp/test/mobile-only-styles.test.ts
@@ -0,0 +1,110 @@
+/**
+ * These source checks prove the phone fixes do not move desktop layout. Each
+ * changed declaration must stay inside its max-width query unless its desktop
+ * value is deliberately boxless.
+ */
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const source = (name: string) => readFileSync(join(here, '..', 'src', name), 'utf8');
+const maxWidthPattern = /@media \(max-width: \d+px\) \{([\s\S]*?)\n\}/gu;
+
+function maxWidthCss(css: string): string {
+  return [...css.matchAll(maxWidthPattern)].map((block) => block[1] ?? '').join('\n');
+}
+
+function desktopCss(css: string): string {
+  return css.replace(maxWidthPattern, '');
+}
+
+function ruleBodies(css: string, selector: string): string[] {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&');
+  const pattern = new RegExp(`(?:^|\\n)\\s*${escaped}\\s*\\{([^{}]*)\\}`, 'gu');
+  return [...css.matchAll(pattern)].map((match) => match[1] ?? '');
+}
+
+function declares(css: string, selector: string, property: string, value: string): boolean {
+  const declaration = new RegExp(
+    `(?:^|;)\\s*${property}\\s*:\\s*${value}\\s*(?:;|$)`,
+    'u',
+  );
+  return ruleBodies(css, selector).some((body) => declaration.test(body));
+}
+
+function expectOnlyBelowBreakpoint(
+  css: string,
+  file: string,
+  selector: string,
+  property: string,
+  value: string,
+): void {
+  const declaration = `${property}: ${value}`;
+  expect(
+    declares(maxWidthCss(css), selector, property, value),
+    `${file}: ${selector} must declare ${declaration} inside a max-width query`,
+  ).toBe(true);
+  expect(
+    declares(desktopCss(css), selector, property, value),
+    `${file}: ${selector} must not declare ${declaration} outside a max-width query`,
+  ).toBe(false);
+}
+
+describe('mobile-only stylesheet changes', () => {
+  it('keeps the full-width rail and scrim removal mobile-only', () => {
+    const css = source('strip-rail.css');
+    expectOnlyBelowBreakpoint(css, 'strip-rail.css', '.shell-nav', 'width', '100%');
+    // The full-width nav covers the viewport, so a scrim would cover nothing.
+    // It is deleted rather than hidden, and `ShellNav` stops rendering it.
+    expect(
+      css.includes('shell-nav-scrim'),
+      'strip-rail.css: the scrim must be deleted, not hidden',
+    ).toBe(false);
+  });
+
+  it('keeps the create-workspace scroller and action layout mobile-only', () => {
+    const css = source('create-workspace-dialog.css');
+    expectOnlyBelowBreakpoint(
+      css,
+      'create-workspace-dialog.css',
+      '.create-workspace-dialog',
+      'overflow-y',
+      'auto',
+    );
+    expectOnlyBelowBreakpoint(
+      css,
+      'create-workspace-dialog.css',
+      '.create-workspace-header',
+      'position',
+      'sticky',
+    );
+    expectOnlyBelowBreakpoint(
+      css,
+      'create-workspace-dialog.css',
+      '.create-workspace-actions',
+      'justify-content',
+      'stretch',
+    );
+    expect(
+      declares(maxWidthCss(css), '.create-workspace-actions--blueprint', 'display', 'flex'),
+      'create-workspace-dialog.css: blueprint actions must stay side by side on mobile',
+    ).toBe(true);
+  });
+
+  it('keeps the member machine wrapper boxless on desktop', () => {
+    const css = source('workspace-details-dialog.css');
+    expect(
+      declares(desktopCss(css), '.workspace-member-machine', 'display', 'contents'),
+      'workspace-details-dialog.css: the desktop member machine wrapper must use display: contents',
+    ).toBe(true);
+    expectOnlyBelowBreakpoint(
+      css,
+      'workspace-details-dialog.css',
+      '.workspace-member-machine',
+      'display',
+      'flex',
+    );
+  });
+});
diff --git a/packages/webapp/test/mobile-rail-route.test.ts b/packages/webapp/test/mobile-rail-route.test.ts
new file mode 100644
index 00000000..d3b9f89a
--- /dev/null
+++ b/packages/webapp/test/mobile-rail-route.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { routeShowsMobileRail } from '../src/shell/mobile-rail.js';
+import type { AppRoute, ChatAddress } from '../src/sessions-page-state.js';
+
+const workspaceRoute = (chat: ChatAddress): AppRoute => ({
+  workspaceId: 'workspace-one',
+  page: 'webApp',
+  chat,
+});
+
+describe('routeShowsMobileRail', () => {
+  it('shows the rail only for the workspace landing', () => {
+    expect(routeShowsMobileRail(workspaceRoute('landing'))).toBe(true);
+  });
+
+  it.each([
+    ['pane workspace', workspaceRoute(null)],
+    ['archive', workspaceRoute('archive')],
+    ['session', workspaceRoute({ sessionId: 'session-one' })],
+    ['shared session', workspaceRoute({ sessionId: 'session-two', sharedFrom: 'member-two' })],
+    ['landing terminal', workspaceRoute({ terminalId: 'terminal-one' })],
+    ['session terminal', workspaceRoute({ sessionId: 'session-one', terminalId: 'terminal-two' })],
+    ['home', { workspaceId: null, page: 'home' }],
+    ['settings', { workspaceId: null, page: 'settings', settingsSection: 'profile' }],
+  ] satisfies ReadonlyArray<readonly [string, AppRoute]>)('hides the rail for %s', (_name, route) => {
+    expect(routeShowsMobileRail(route)).toBe(false);
+  });
+});
diff --git a/packages/webapp/test/shell-mobile-drawer.test.tsx b/packages/webapp/test/shell-mobile-drawer.test.tsx
index 0b44b7a6..11d61daa 100644
--- a/packages/webapp/test/shell-mobile-drawer.test.tsx
+++ b/packages/webapp/test/shell-mobile-drawer.test.tsx
@@ -6,8 +6,8 @@
  * the rail's list with a portal host, and the risk that buys is structural: a
  * host handed over by ref could plausibly be created outside the drawer, or the
  * drawer could stop opening because the rail no longer renders rows. So this
- * asserts the whole path — open, host present INSIDE the drawer, scrim, close —
- * at mobile width, in both rail shapes.
+ * asserts the whole path — open, host present INSIDE the drawer, close — at
+ * mobile width, in both rail shapes.
  *
  * The breakpoint is read out of `strip-rail.css` rather than repeated here: a
  * test that hard-codes 899 keeps passing after somebody moves the media query.
@@ -73,7 +73,7 @@ function nav(overrides: Partial<Parameters<typeof ShellNav>[0]> = {}) {
 }
 
 describe("the mobile navigation drawer", () => {
-  it("opens, scrims and closes with the vendored zone inside it", async () => {
+  it("opens and closes with the vendored zone inside it", async () => {
     const breakpoint = drawerBreakpoint();
     // jsdom does not lay out, so the width is asserted rather than measured:
     // what this test proves is the DOM and the callbacks, and the CSS above is
@@ -96,21 +96,22 @@ describe("the mobile navigation drawer", () => {
     expect(drawer?.contains(seen.host)).toBe(true);
     expect(seen.host?.className).toContain("session-list--vendor");
 
-    const scrim = view.container.querySelector<HTMLButtonElement>(".shell-nav-scrim");
-    expect(scrim?.className).toContain("shell-nav-scrim--open");
-    await act(async () => scrim?.click());
+    // The nav fills the screen, so there is no scrim behind it. The strip's own
+    // close button is what dismisses it.
+    expect(view.container.querySelector(".shell-nav-scrim")).toBeNull();
+    const close = drawer?.querySelector<HTMLButtonElement>(
+      'button[aria-label="Close workspace navigation"]',
+    );
+    await act(async () => close?.click());
     expect(onCloseDrawer).toHaveBeenCalledTimes(1);
 
     await view.unmount();
   });
 
-  it("closes the drawer and drops the scrim with the flag off", async () => {
+  it("keeps the drawer closed with the flag off", async () => {
     window.innerWidth = drawerBreakpoint() - 99;
     const view = await render(nav({ drawerOpen: false }));
     expect(view.container.querySelector(".shell-nav")?.className).not.toContain("shell-nav--open");
-    expect(view.container.querySelector(".shell-nav-scrim")?.className).not.toContain(
-      "shell-nav-scrim--open",
-    );
     // Flag off: the rail is still the native list, drawer or not.
     expect(view.container.querySelector(".session-list .shell-s")).not.toBeNull();
     expect(view.container.querySelector(".session-list--vendor")).toBeNull();
diff --git a/packages/webapp/test/shell-smoke.test.tsx b/packages/webapp/test/shell-smoke.test.tsx
index 9be9fe84..e85dd389 100644
--- a/packages/webapp/test/shell-smoke.test.tsx
+++ b/packages/webapp/test/shell-smoke.test.tsx
@@ -1314,6 +1314,59 @@ describe("webapp shell smoke", () => {
     await view.unmount();
   });
 
+  it("opens mobile workspace navigation on the workspace landing", async () => {
+    window.history.replaceState({}, "", "/workspaces/workspace-running/chat");
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      value: () => ({
+        matches: true,
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+      }),
+    });
+    const view = await render(
+      <CloudApp
+        client={runningClient()}
+        resolver={standaloneResolver({ files: 7445 })}
+      />,
+    );
+    await settle();
+    await settle();
+
+    expect(navigationExpanded(view.container)).toBe("true");
+    await view.unmount();
+  });
+
+  it("closes mobile workspace navigation before opening create workspace", async () => {
+    window.history.replaceState({}, "", "/workspaces/workspace-running/chat");
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      value: () => ({
+        matches: true,
+        addEventListener: () => undefined,
+        removeEventListener: () => undefined,
+      }),
+    });
+    const view = await render(
+      <CloudApp
+        client={runningClient()}
+        resolver={standaloneResolver({ files: 7445 })}
+      />,
+    );
+    await settle();
+    await settle();
+    expect(navigationExpanded(view.container)).toBe("true");
+
+    await click(view.container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Create workspace"]',
+    ));
+    await settle();
+
+    expect(navigationExpanded(view.container)).toBe("false");
+    expect(view.container.querySelector('form[aria-label="Create workspace"]')).not.toBeNull();
+    await view.unmount();
+  });
+
   it("resizes the side pane by dragging its handle, no narrower than the default", async () => {
     window.history.replaceState({}, "", "/workspaces/workspace-running");
     saveTabs("workspace-running", [