From f4beda6b876836901f99181335e7ae125a28ae52 Mon Sep 17 00:00:00 2001
From: Badcuban <108198679+badcuban@users.noreply.github.com>
Date: Sat, 14 Nov 2026 11:18:12 -0500
Subject: [PATCH 1/2] fix(web): panels and pop-ups keep clear of the iPhone
 Duo's side dock

The iPhone Duo keeps a strip down the right edge of the screen for its
status dock (clock, battery, signal), folded or open, and reports it as
env(safe-area-inset-right) for the whole height. The title row and the
composer already kept out of it; everything else that touches that edge
did not, so the right panel's close button, the file browser's close
button and the first controls of several pages sat under the dock.

- index.css maps the side insets into --safe-area-left/right, with
  page-gutters and window-gutters utilities for surfaces that scroll or
  paint to the window's edge. sideStrips.ts reports the widths in px to
  script through a ResizeObserver probe (no resize listener, no forced
  layout).
- The right panel's sheet carries its fill into the strip and pads the
  panel out of it, keeping the panel's own width.
- Dialogs, alert dialogs, the command palette, the theme trial bar, the
  image viewer and toasts stay off the strip; a phone's bottom sheets
  pad their content out of it. Dialog centering counts the page's edges
  from the strips.
- Menus, popovers, selects, comboboxes, autocompletes, preview cards
  and anchored toasts add the strips to their collision padding.
- Page bodies (Settings, General chats, Fleet, Scheduled, Pull
  requests, Usage), setup, pairing and reconnect screens, the find bars
  and the terminal's button row keep off the strip. The conversation
  stays full width.

Two bugs found on the folded screen while testing fold and unfold:

- The whole app renders inside the command palette's dialog, and Base
  UI leaves the backdrop out of a drawer nested in another dialog. The
  page never dimmed behind the phone's thread list or the right panel's
  sheet, and a press beside the sheet did not close it. The drawer's
  backdrop is now forced; the right panel asks for one only in the
  phone layout, so a narrow desktop window keeps its floating panel.
- The phone's thread list stayed open in state while the layout was
  the desktop one, so unfolding and folding again put it back over the
  chat. It is put away when the layout stops being the phone's.
---
 .../ChatRightPanelInlineSidebar.tsx           |   6 +-
 .../components/ChatView.panels.browser.tsx    | 139 ++++++++++++++++++
 .../src/components/ChatView.shell.browser.tsx |  36 +++++
 .../src/components/ChatsDestinationView.tsx   |   4 +-
 apps/web/src/components/RightPanelSheet.tsx   |  14 +-
 .../SavedEnvironmentConnectionOverlay.tsx     |   2 +-
 .../src/components/ThreadTerminalDrawer.tsx   |   2 +-
 .../components/auth/PairingRouteSurface.tsx   |   4 +-
 .../components/chat/ExpandedImageDialog.tsx   |  16 +-
 .../src/components/chat/chatFind/ChatFind.tsx |   5 +-
 .../file-viewer/FileViewerOverlay.tsx         |   6 +-
 .../components/fleet/FleetComputerView.tsx    |   2 +-
 apps/web/src/components/fleet/FleetView.tsx   |   2 +-
 .../pull-requests/PullRequestsView.tsx        |   9 +-
 .../components/scheduled/ScheduledView.tsx    |   2 +-
 .../components/settings/settingsLayout.tsx    |   2 +-
 .../src/components/setup/AgentSetupScreen.tsx |   4 +-
 .../components/terminal/TerminalFindBar.tsx   |   2 +-
 .../theme/ui/ThemeTrialBarContent.tsx         |   2 +-
 apps/web/src/components/ui/alert-dialog.tsx   |  10 +-
 apps/web/src/components/ui/autocomplete.tsx   |   3 +
 apps/web/src/components/ui/combobox.tsx       |   3 +
 apps/web/src/components/ui/command.tsx        |   4 +-
 apps/web/src/components/ui/dialog.browser.tsx |  53 ++++++-
 apps/web/src/components/ui/dialog.tsx         |  15 +-
 apps/web/src/components/ui/drawer.tsx         |  39 +++--
 apps/web/src/components/ui/menu.tsx           |   3 +
 apps/web/src/components/ui/popover.tsx        |   6 +-
 apps/web/src/components/ui/previewCard.tsx    |   3 +
 apps/web/src/components/ui/select.tsx         |  10 +-
 apps/web/src/components/ui/sidebar.tsx        |   8 +
 apps/web/src/components/ui/toast.tsx          |  16 +-
 apps/web/src/components/usage/UsageView.tsx   |   2 +-
 apps/web/src/index.css                        |  63 ++++++--
 apps/web/src/mainAreaLayout.ts                |  17 ++-
 apps/web/src/rightPanelLayout.ts              |  12 +-
 apps/web/src/sideStrips.browser.tsx           |  44 ++++++
 apps/web/src/sideStrips.ts                    | 107 ++++++++++++++
 docs/design/design-language.md                |  14 ++
 39 files changed, 617 insertions(+), 74 deletions(-)
 create mode 100644 apps/web/src/sideStrips.browser.tsx
 create mode 100644 apps/web/src/sideStrips.ts

diff --git a/apps/web/src/components/ChatRightPanelInlineSidebar.tsx b/apps/web/src/components/ChatRightPanelInlineSidebar.tsx
index 6bb70393e..afbe814d0 100644
--- a/apps/web/src/components/ChatRightPanelInlineSidebar.tsx
+++ b/apps/web/src/components/ChatRightPanelInlineSidebar.tsx
@@ -106,7 +106,11 @@ export function ChatRightPanelInlineSidebar(props: {
         collapsible="offcanvas"
         className={cn(
           "border-l border-border bg-rail text-foreground",
-          isElectron && "pe-[var(--app-window-resize-edge-inset)]",
+          // Out of what the window's right edge is kept for: the desktop
+          // app's resize grip, or a screen's strip down that side. The strip
+          // comes out of the panel's own width here (no screen this wide has
+          // one yet); the sheet in RightPanelSheet adds it instead.
+          isElectron ? "pe-[var(--app-window-resize-edge-inset)]" : "pr-safe",
         )}
         motion="instant"
         resizable={{
diff --git a/apps/web/src/components/ChatView.panels.browser.tsx b/apps/web/src/components/ChatView.panels.browser.tsx
index ffebbf42e..1ad441667 100644
--- a/apps/web/src/components/ChatView.panels.browser.tsx
+++ b/apps/web/src/components/ChatView.panels.browser.tsx
@@ -12,6 +12,7 @@ import { page, userEvent } from "vite-plus/test/browser";
 import { describe, expect, it, vi } from "vite-plus/test";
 
 import { useComposerDraftStore, DraftId } from "../composerDraftStore";
+import { nextFrames } from "../lib/frameProbe.browser-harness";
 import { isMacPlatform } from "../lib/utils";
 import { RIGHT_PANEL_RAIL_WIDTH } from "../rightPanelLayout";
 import { useTerminalStateStore } from "../terminalStateStore";
@@ -365,6 +366,144 @@ describe("ChatView (full app): right panel and header actions", () => {
     }
   });
 
+  it("keeps the overlay panel's controls off a strip the screen holds back down its right side", async () => {
+    // An iPhone Duo, folded: its status dock hangs down the right edge, and
+    // the sheet's close button used to sit under it.
+    const strip = 85;
+    document.documentElement.style.setProperty("--safe-area-right", `${strip}px`);
+    const mounted = await mountChatView({
+      viewport: { ...PHONE_VIEWPORT, width: 466, height: 678 },
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-rail-sheet-strip" as MessageId,
+        targetText: "rail sheet strip",
+      }),
+    });
+
+    try {
+      const railToggle = await waitForElement(
+        () =>
+          document.querySelector('button[aria-label="Toggle panel"]') as HTMLButtonElement | null,
+        "Unable to find the rail toggle.",
+      );
+      railToggle.click();
+      const closeButton = await waitForElement(
+        () =>
+          document.querySelector('button[aria-label="Close panel"]') as HTMLButtonElement | null,
+        "The sheet never showed its close button.",
+      );
+      const popup = closeButton.closest('[data-slot="drawer-popup"]') as HTMLElement;
+      const panel = closeButton.closest("[data-chat-right-panel='true']") as HTMLElement;
+
+      await vi.waitFor(
+        () => {
+          // The sheet's fill reaches the screen's edge, under the strip; the
+          // panel stops at the strip and keeps its own width beside it (the
+          // rail's, less the sheet's hairline).
+          expect(popup.getBoundingClientRect().right).toBeCloseTo(window.innerWidth, 0);
+          expect(panel.getBoundingClientRect().right).toBeCloseTo(window.innerWidth - strip, 0);
+          expect(panel.getBoundingClientRect().width).toBeCloseTo(RIGHT_PANEL_RAIL_WIDTH - 1, 0);
+          expect(closeButton.getBoundingClientRect().right).toBeLessThanOrEqual(
+            window.innerWidth - strip,
+          );
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+    } finally {
+      document.documentElement.style.removeProperty("--safe-area-right");
+      await mounted.cleanup();
+    }
+  });
+
+  it("puts the overlay panel away on a press on the page beside it", async () => {
+    const mounted = await mountChatView({
+      viewport: { ...PHONE_VIEWPORT, width: 466, height: 678 },
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-rail-sheet-press" as MessageId,
+        targetText: "rail sheet press",
+      }),
+    });
+
+    try {
+      const railToggle = await waitForElement(
+        () =>
+          document.querySelector('button[aria-label="Toggle panel"]') as HTMLButtonElement | null,
+        "Unable to find the rail toggle.",
+      );
+      railToggle.click();
+      const launcher = await waitForElement(
+        () => document.querySelector("[data-right-panel-launcher='true']") as HTMLElement | null,
+        "The sidebar never opened on a phone width.",
+      );
+      const popup = launcher.closest('[data-slot="drawer-popup"]') as HTMLElement;
+      await vi.waitFor(
+        () => {
+          expect(popup.getBoundingClientRect().right).toBeCloseTo(window.innerWidth, 0);
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+
+      // The slice of the conversation left of the sheet, below the header:
+      // whatever is on top there takes the press.
+      const beside = document.elementFromPoint(
+        popup.getBoundingClientRect().left / 2,
+        window.innerHeight / 2,
+      ) as HTMLElement;
+      beside.click();
+
+      await vi.waitFor(
+        () => {
+          expect(document.querySelector("[data-right-panel-launcher='true']")).toBeNull();
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
+  it("floats the panel over a narrow window's page, which stays undimmed and in use beside it", async () => {
+    const mounted = await mountChatView({
+      viewport: { ...DEFAULT_VIEWPORT, name: "narrow-sheet", width: 800 },
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-narrow-sheet" as MessageId,
+        targetText: "narrow sheet",
+      }),
+    });
+
+    try {
+      const railToggle = await waitForElement(
+        () =>
+          document.querySelector('button[aria-label="Toggle panel"]') as HTMLButtonElement | null,
+        "Unable to find the rail toggle.",
+      );
+      railToggle.click();
+      const launcher = await waitForElement(
+        () => document.querySelector("[data-right-panel-launcher='true']") as HTMLElement | null,
+        "The panel never opened in a narrow window.",
+      );
+      const popup = launcher.closest('[data-slot="drawer-popup"]') as HTMLElement;
+      await vi.waitFor(
+        () => {
+          expect(popup.getBoundingClientRect().right).toBeCloseTo(window.innerWidth, 0);
+        },
+        { timeout: 8_000, interval: 16 },
+      );
+
+      // What is on top of the page beside the panel is the page itself, not
+      // a layer over it, and a press there leaves the panel open.
+      const beside = document.elementFromPoint(
+        popup.getBoundingClientRect().left / 2,
+        window.innerHeight / 2,
+      ) as HTMLElement;
+      expect(beside.closest('[data-testid="app-panel"]')).not.toBeNull();
+      beside.click();
+      await nextFrames(10);
+      expect(document.querySelector("[data-right-panel-launcher='true']")).not.toBeNull();
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
   it("closes the overlay panel with a finger pushing it right, and not with a mouse drag", async () => {
     const mounted = await mountChatView({
       viewport: PHONE_VIEWPORT,
diff --git a/apps/web/src/components/ChatView.shell.browser.tsx b/apps/web/src/components/ChatView.shell.browser.tsx
index c69e77d3f..3c1cb8bdb 100644
--- a/apps/web/src/components/ChatView.shell.browser.tsx
+++ b/apps/web/src/components/ChatView.shell.browser.tsx
@@ -1487,6 +1487,42 @@ describe("ChatView (full app): app shell", () => {
     }
   });
 
+  it("finds the list's sheet closed when a phone folds again after unfolding with it open", async () => {
+    // A folding phone: the folded screen has the phone layout, the open one
+    // the desktop layout. The sheet used to stay open behind the scenes while
+    // unfolded and cover the chat on the way back.
+    const sheet = () => document.querySelector('[data-slot="sidebar"][data-mobile="true"]');
+    const mounted = await mountChatView({
+      viewport: PHONE_VIEWPORT,
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-phone-fold" as MessageId,
+        targetText: "phone fold",
+      }),
+    });
+
+    try {
+      const trigger = await waitForElement(
+        () => document.querySelector<HTMLButtonElement>('button[data-sidebar="trigger"]'),
+        "Unable to find mobile sidebar trigger.",
+      );
+      trigger.click();
+      await vi.waitFor(() => expect(sheet()).not.toBeNull(), { timeout: 4_000, interval: 16 });
+
+      await mounted.setViewport(DEFAULT_VIEWPORT);
+      await vi.waitFor(() => expect(sheet()).toBeNull(), { timeout: 4_000, interval: 16 });
+
+      await mounted.setViewport(PHONE_VIEWPORT);
+      await waitForElement(
+        () => document.querySelector<HTMLButtonElement>('button[data-sidebar="trigger"]'),
+        "The phone layout never came back.",
+      );
+      await nextFrames(10);
+      expect(sheet()).toBeNull();
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
   it("on a phone, lists the open page's own items in the sheet, names its icons, and closes on a pick", async () => {
     const readingChatId = "thread-phone-chat-reading" as ThreadId;
     const otherChatId = "thread-phone-chat-other" as ThreadId;
diff --git a/apps/web/src/components/ChatsDestinationView.tsx b/apps/web/src/components/ChatsDestinationView.tsx
index 41a3af032..a3a5f564a 100644
--- a/apps/web/src/components/ChatsDestinationView.tsx
+++ b/apps/web/src/components/ChatsDestinationView.tsx
@@ -49,7 +49,7 @@ function StartGeneralChat() {
     <div className="flex h-full min-h-0 w-full min-w-0 flex-col" data-testid="chats-view">
       <PageTitlebar label="General chats" />
       <div
-        className="flex min-h-0 flex-1 flex-col items-center justify-center gap-4 px-6 pb-16 text-center"
+        className="page-gutters flex min-h-0 flex-1 flex-col items-center justify-center gap-4 pb-16 text-center [--side-gutter:--spacing(6)]"
         {...glassPage.content}
       >
         <MessagesSquareIcon aria-hidden="true" className="size-6 text-muted-foreground" />
@@ -112,7 +112,7 @@ function GeneralChatsPage() {
         </PageTitlebar>
         {/* The pane-wide element scrolls so the scrollbar hugs the pane's edge
             (like Settings); the reading column centers inside it. */}
-        <div className="min-h-0 flex-1 overflow-y-auto" {...glassPage.content}>
+        <div className="page-gutters min-h-0 flex-1 overflow-y-auto" {...glassPage.content}>
           <div
             className="mx-auto flex min-h-full w-full max-w-2xl flex-col px-6 py-6"
             {...glassPage.column}
diff --git a/apps/web/src/components/RightPanelSheet.tsx b/apps/web/src/components/RightPanelSheet.tsx
index 3770c72fb..25ab134f6 100644
--- a/apps/web/src/components/RightPanelSheet.tsx
+++ b/apps/web/src/components/RightPanelSheet.tsx
@@ -1,6 +1,7 @@
 import { type CSSProperties, type ReactNode } from "react";
 
 import { isElectron } from "../env";
+import { useIsMobile } from "../hooks/useMediaQuery";
 import { cn } from "../lib/utils";
 import {
   RIGHT_PANEL_RAIL_SHEET_CLASS_NAME,
@@ -28,6 +29,11 @@ export function RightPanelSheet(props: {
   size?: keyof typeof SHEET_CLASS_NAME_BY_SIZE;
 }) {
   const size = props.size ?? "default";
+  // On a phone the page dims behind the sheet and a press on it puts the
+  // sheet away. In the desktop layout (a narrow window, a folding phone's
+  // open screen) the sheet floats: the page beside it stays in use, and the
+  // sheet closes from its own button or the header's.
+  const phoneLayout = useIsMobile();
 
   return (
     <Drawer
@@ -38,7 +44,7 @@ export function RightPanelSheet(props: {
       // That needs a non-modal dialog (the header must stay interactive) with
       // pointer dismissal disabled: an outside-press dismissal on a header
       // toggle would close the sheet before the toggle's click reopens it.
-      // The backdrop closes it explicitly instead.
+      // On a phone the backdrop closes it explicitly instead.
       modal={false}
       disablePointerDismissal
       onOpenChange={(open) => {
@@ -50,6 +56,7 @@ export function RightPanelSheet(props: {
       <DrawerPopup
         side="right"
         keepMounted
+        backdrop={phoneLayout}
         viewportClassName={RIGHT_PANEL_SHEET_VIEWPORT_CLASS_NAME}
         backdropProps={{
           className: RIGHT_PANEL_SHEET_BACKDROP_CLASS_NAME,
@@ -57,7 +64,10 @@ export function RightPanelSheet(props: {
         }}
         className={cn(
           SHEET_CLASS_NAME_BY_SIZE[size],
-          isElectron && "pe-[var(--app-window-resize-edge-inset)]",
+          // The panel keeps out of what the window's right edge is kept
+          // for: the desktop app's resize grip, or a phone's strip down that
+          // side, where the sheet shows the panel's own fill.
+          isElectron ? "pe-[var(--app-window-resize-edge-inset)]" : "bg-rail pr-safe",
         )}
         style={{ "--right-panel-rail-width": `${RIGHT_PANEL_RAIL_WIDTH}px` } as CSSProperties}
       >
diff --git a/apps/web/src/components/SavedEnvironmentConnectionOverlay.tsx b/apps/web/src/components/SavedEnvironmentConnectionOverlay.tsx
index 22ff2d8a5..04b0eb6cc 100644
--- a/apps/web/src/components/SavedEnvironmentConnectionOverlay.tsx
+++ b/apps/web/src/components/SavedEnvironmentConnectionOverlay.tsx
@@ -406,7 +406,7 @@ function ComputerConnectionOverlay({
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-background px-4 py-10 text-foreground sm:px-6">
+    <div className="window-gutters fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-background py-10 text-foreground [--side-gutter:--spacing(4)] sm:[--side-gutter:--spacing(6)]">
       <div className="pointer-events-none absolute inset-0 opacity-80">
         <div className="absolute inset-x-0 top-0 h-44 bg-[radial-gradient(44rem_16rem_at_top,color-mix(in_srgb,var(--color-amber-500)_12%,transparent),transparent)]" />
         <div className="absolute inset-0 bg-[linear-gradient(145deg,color-mix(in_srgb,var(--background)_90%,var(--color-black))_0%,var(--background)_55%)]" />
diff --git a/apps/web/src/components/ThreadTerminalDrawer.tsx b/apps/web/src/components/ThreadTerminalDrawer.tsx
index f53e46bdf..17e0603db 100644
--- a/apps/web/src/components/ThreadTerminalDrawer.tsx
+++ b/apps/web/src/components/ThreadTerminalDrawer.tsx
@@ -1846,7 +1846,7 @@ export default function ThreadTerminalDrawer({
         <div className="h-px w-full bg-transparent transition-colors group-hover/terminal-edge:bg-ring group-focus-visible/terminal-edge:bg-ring" />
       </div>
 
-      <div className="flex h-8 shrink-0 items-stretch gap-1 bg-rail pt-1 pr-1.5 pl-1.5">
+      <div className="flex h-8 shrink-0 items-stretch gap-1 bg-rail pt-1 pr-[calc(--spacing(1.5)+var(--safe-area-right))] pl-[calc(--spacing(1.5)+var(--safe-area-left))]">
         <TerminalTabStrip
           groups={stripGroups}
           activeTerminalId={resolvedActiveTerminalId}
diff --git a/apps/web/src/components/auth/PairingRouteSurface.tsx b/apps/web/src/components/auth/PairingRouteSurface.tsx
index e0e824453..11fb59dcc 100644
--- a/apps/web/src/components/auth/PairingRouteSurface.tsx
+++ b/apps/web/src/components/auth/PairingRouteSurface.tsx
@@ -117,7 +117,7 @@ export function PairingRouteSurface({
   }, [submitCredential]);
 
   return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background px-4 py-10 text-foreground sm:px-6">
+    <div className="window-gutters relative flex min-h-screen items-center justify-center overflow-hidden bg-background py-10 text-foreground [--side-gutter:--spacing(4)] sm:[--side-gutter:--spacing(6)]">
       <div className="pointer-events-none absolute inset-0 opacity-80">
         <div className="absolute inset-x-0 top-0 h-44 bg-[radial-gradient(44rem_16rem_at_top,color-mix(in_srgb,var(--color-emerald-500)_14%,transparent),transparent)]" />
         <div className="absolute inset-y-0 left-0 w-72 bg-[radial-gradient(28rem_18rem_at_left,color-mix(in_srgb,var(--primary)_10%,transparent),transparent)]" />
@@ -305,7 +305,7 @@ export function HostedPairingRouteSurface() {
   const linkInvalid = probeNotice?.terminal === true;
 
   return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background px-4 py-10 text-foreground sm:px-6">
+    <div className="window-gutters relative flex min-h-screen items-center justify-center overflow-hidden bg-background py-10 text-foreground [--side-gutter:--spacing(4)] sm:[--side-gutter:--spacing(6)]">
       <div className="pointer-events-none absolute inset-0 opacity-80">
         <div className="absolute inset-x-0 top-0 h-44 bg-[radial-gradient(44rem_16rem_at_top,color-mix(in_srgb,var(--color-emerald-500)_14%,transparent),transparent)]" />
         <div className="absolute inset-y-0 left-0 w-72 bg-[radial-gradient(28rem_18rem_at_left,color-mix(in_srgb,var(--primary)_10%,transparent),transparent)]" />
diff --git a/apps/web/src/components/chat/ExpandedImageDialog.tsx b/apps/web/src/components/chat/ExpandedImageDialog.tsx
index ac45572ce..df125ff65 100644
--- a/apps/web/src/components/chat/ExpandedImageDialog.tsx
+++ b/apps/web/src/components/chat/ExpandedImageDialog.tsx
@@ -116,7 +116,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
     <div
       ref={dialogRef}
       tabIndex={-1}
-      className="fixed inset-0 z-50 flex touch-none items-center justify-center overflow-hidden bg-black/75 px-4 py-6 outline-none [-webkit-app-region:no-drag]"
+      className="fixed inset-0 z-50 flex touch-none items-center justify-center overflow-hidden bg-black/75 py-6 pr-[calc(1rem+var(--safe-area-right))] pl-[calc(1rem+var(--safe-area-left))] outline-none [-webkit-app-region:no-drag]"
       role="dialog"
       aria-modal="true"
       aria-label="Expanded image preview"
@@ -137,14 +137,14 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
           type="button"
           size="icon"
           variant="ghost"
-          className="absolute left-2 top-1/2 z-20 -translate-y-1/2 text-white/90 hover:bg-white/10 hover:text-white sm:left-6"
+          className="absolute left-[calc(--spacing(2)+var(--safe-area-left))] top-1/2 z-20 -translate-y-1/2 text-white/90 hover:bg-white/10 hover:text-white sm:left-[calc(--spacing(6)+var(--safe-area-left))]"
           aria-label="Previous image"
           onClick={() => navigateImage(-1)}
         >
           <ChevronLeftIcon className="size-5" />
         </Button>
       )}
-      <div className="relative isolate z-10 max-h-[92vh] max-w-[92vw]">
+      <div className="relative isolate z-10 max-h-[92vh] max-w-[calc(92vw-var(--safe-area-left)-var(--safe-area-right))]">
         <Button
           type="button"
           size="icon-xs"
@@ -189,7 +189,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
             onClose={onClose}
           />
         ) : (
-          <div className="flex h-[40vh] w-[min(560px,80vw)] items-center justify-center rounded-lg border border-white/10 bg-black/40 text-sm text-white/70">
+          <div className="flex h-[40vh] w-[min(560px,calc(80vw-var(--safe-area-left)-var(--safe-area-right)))] items-center justify-center rounded-lg border border-white/10 bg-black/40 text-sm text-white/70">
             {picture.status === "loading"
               ? "Loading picture…"
               : side === "before"
@@ -197,12 +197,12 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
                 : "Couldn't load this picture."}
           </div>
         )}
-        <p className="mt-2 max-w-[92vw] truncate text-center text-xs text-muted-foreground/80">
+        <p className="mt-2 max-w-[calc(92vw-var(--safe-area-left)-var(--safe-area-right))] truncate text-center text-xs text-muted-foreground/80">
           {item.name}
           {preview.images.length > 1 ? ` (${preview.index + 1}/${preview.images.length})` : ""}
         </p>
         {item.detail ? (
-          <p className="max-w-[92vw] truncate text-center text-xs text-muted-foreground/60">
+          <p className="max-w-[calc(92vw-var(--safe-area-left)-var(--safe-area-right))] truncate text-center text-xs text-muted-foreground/60">
             {item.detail}
           </p>
         ) : null}
@@ -212,7 +212,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
           type="button"
           size="icon"
           variant="ghost"
-          className="absolute right-2 top-1/2 z-20 -translate-y-1/2 text-white/90 hover:bg-white/10 hover:text-white sm:right-6"
+          className="absolute right-[calc(--spacing(2)+var(--safe-area-right))] top-1/2 z-20 -translate-y-1/2 text-white/90 hover:bg-white/10 hover:text-white sm:right-[calc(--spacing(6)+var(--safe-area-right))]"
           aria-label="Next image"
           onClick={() => navigateImage(1)}
         >
@@ -575,7 +575,7 @@ function ZoomableImage(props: {
         src={props.src}
         alt={props.alt}
         className={cn(
-          "block max-h-[86vh] max-w-[92vw] select-none rounded-lg border border-border/70 bg-background object-contain shadow-2xl",
+          "block max-h-[86vh] max-w-[calc(92vw-var(--safe-area-left)-var(--safe-area-right))] select-none rounded-lg border border-border/70 bg-background object-contain shadow-2xl",
           zoomed ? (dragging ? "cursor-grabbing" : "cursor-grab") : "cursor-zoom-in",
         )}
         style={{
diff --git a/apps/web/src/components/chat/chatFind/ChatFind.tsx b/apps/web/src/components/chat/chatFind/ChatFind.tsx
index 8288b5b2a..e5d96b48d 100644
--- a/apps/web/src/components/chat/chatFind/ChatFind.tsx
+++ b/apps/web/src/components/chat/chatFind/ChatFind.tsx
@@ -427,7 +427,10 @@ function ChatFindSession(props: ChatFindProps) {
         : { kind: "matches", current: chatFindMatchNumber(result, current), total: result.total };
 
   return (
-    <div ref={barRef} className="absolute top-2 right-3 z-20 max-w-[calc(100%-1.5rem)]">
+    <div
+      ref={barRef}
+      className="absolute top-2 right-[calc(--spacing(3)+var(--safe-area-right))] z-20 max-w-[calc(100%-1.5rem-var(--safe-area-right))]"
+    >
       <FindBar
         query={query}
         onQueryChange={setQuery}
diff --git a/apps/web/src/components/file-viewer/FileViewerOverlay.tsx b/apps/web/src/components/file-viewer/FileViewerOverlay.tsx
index fb524e57f..abbfa742b 100644
--- a/apps/web/src/components/file-viewer/FileViewerOverlay.tsx
+++ b/apps/web/src/components/file-viewer/FileViewerOverlay.tsx
@@ -1778,10 +1778,12 @@ export default function FileViewerOverlay() {
     >
       {/* Desktop sizes are `sm:`-scoped so the popup's bottom-sheet mobile
           styling wins below that: a full-width sheet filling the viewport
-          under the 3rem (pt-12) backdrop reveal. */}
+          under the 3rem (pt-12) backdrop reveal. The desktop width is the
+          dialog viewport's own room less a rem each side (2rem off each edge
+          of the window), which keeps it off a screen's side strips too. */}
       <DialogPopup
         showCloseButton={false}
-        className="flex h-[calc(100dvh-3rem)] flex-col gap-0 overflow-hidden p-0 sm:h-[86vh] sm:w-[calc(100vw-4rem)] sm:max-w-[1400px]"
+        className="flex h-[calc(100dvh-3rem)] flex-col gap-0 overflow-hidden p-0 sm:h-[86vh] sm:w-[calc(100%-2rem)] sm:max-w-[1400px]"
       >
         <DialogTitle className="sr-only">Project files</DialogTitle>
         <DiffWorkerPoolProvider>
diff --git a/apps/web/src/components/fleet/FleetComputerView.tsx b/apps/web/src/components/fleet/FleetComputerView.tsx
index bb1fd524f..0c2833887 100644
--- a/apps/web/src/components/fleet/FleetComputerView.tsx
+++ b/apps/web/src/components/fleet/FleetComputerView.tsx
@@ -462,7 +462,7 @@ export function FleetComputerView({ entryKey }: { readonly entryKey: string }) {
           </button>
         ) : null}
       </PageTitlebar>
-      <div className="min-h-0 flex-1 overflow-y-auto" {...glassPage.content}>
+      <div className="page-gutters min-h-0 flex-1 overflow-y-auto" {...glassPage.content}>
         <div
           className="mx-auto flex w-full max-w-[720px] flex-col gap-7 px-4 pt-5 pb-12 sm:px-8 sm:pt-8"
           {...glassPage.column}
diff --git a/apps/web/src/components/fleet/FleetView.tsx b/apps/web/src/components/fleet/FleetView.tsx
index 5b909073e..b5d83f98b 100644
--- a/apps/web/src/components/fleet/FleetView.tsx
+++ b/apps/web/src/components/fleet/FleetView.tsx
@@ -111,7 +111,7 @@ export function FleetView() {
       {...glassPage.shell}
     >
       <PageTitlebar label="Fleet" />
-      <div className="min-h-0 flex-1 overflow-y-auto" {...glassPage.content}>
+      <div className="page-gutters min-h-0 flex-1 overflow-y-auto" {...glassPage.content}>
         <div
           className="mx-auto flex w-full max-w-[960px] flex-col px-4 pt-5 pb-12 sm:px-8 sm:pt-8"
           {...glassPage.column}
diff --git a/apps/web/src/components/pull-requests/PullRequestsView.tsx b/apps/web/src/components/pull-requests/PullRequestsView.tsx
index 2198f1065..647bf219e 100644
--- a/apps/web/src/components/pull-requests/PullRequestsView.tsx
+++ b/apps/web/src/components/pull-requests/PullRequestsView.tsx
@@ -604,8 +604,11 @@ export function PullRequestsView({
           {...glassPage.content}
           className={cn(
             "min-h-0 min-w-0 flex-1 overflow-y-auto",
-            selectedReference &&
-              "hidden lg:block lg:w-[400px] lg:flex-none lg:border-r lg:border-border",
+            // Whichever column reaches the window's edge keeps its rows off
+            // a strip the screen holds back there (page-gutters in index.css).
+            selectedReference
+              ? "hidden lg:block lg:w-[400px] lg:flex-none lg:border-r lg:border-border"
+              : "page-gutters",
           )}
         >
           <div
@@ -714,7 +717,7 @@ export function PullRequestsView({
 
         {selectedReference && selection ? (
           <div
-            className="flex min-h-0 min-w-0 flex-1 flex-col"
+            className="page-gutters flex min-h-0 min-w-0 flex-1 flex-col"
             data-testid="pull-requests-detail-column"
           >
             {/* Several pull requests stay open at once, and the strip is where
diff --git a/apps/web/src/components/scheduled/ScheduledView.tsx b/apps/web/src/components/scheduled/ScheduledView.tsx
index 4359946e5..e862b1a8a 100644
--- a/apps/web/src/components/scheduled/ScheduledView.tsx
+++ b/apps/web/src/components/scheduled/ScheduledView.tsx
@@ -326,7 +326,7 @@ export function ScheduledView() {
       {...glassPage.shell}
     >
       <PageTitlebar label="Scheduled" />
-      <div className="min-h-0 flex-1 overflow-y-auto" {...glassPage.content}>
+      <div className="page-gutters min-h-0 flex-1 overflow-y-auto" {...glassPage.content}>
         <div
           className="mx-auto flex w-full max-w-[760px] flex-col px-4 pt-5 pb-12 sm:px-8 sm:pt-8"
           {...glassPage.column}
diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx
index 4bf05db20..eab7818ce 100644
--- a/apps/web/src/components/settings/settingsLayout.tsx
+++ b/apps/web/src/components/settings/settingsLayout.tsx
@@ -305,7 +305,7 @@ export function SettingsPageContainer({
   return (
     <div
       {...glassPage.content}
-      className="flex-1 overflow-y-auto px-4 pt-5 pb-8 sm:px-8 sm:pt-8 sm:pb-12"
+      className="page-gutters flex-1 overflow-y-auto pt-5 pb-8 [--side-gutter:--spacing(4)] sm:pt-8 sm:pb-12 sm:[--side-gutter:--spacing(8)]"
     >
       <div
         {...glassPage.column}
diff --git a/apps/web/src/components/setup/AgentSetupScreen.tsx b/apps/web/src/components/setup/AgentSetupScreen.tsx
index 15ce86710..f8762df6d 100644
--- a/apps/web/src/components/setup/AgentSetupScreen.tsx
+++ b/apps/web/src/components/setup/AgentSetupScreen.tsx
@@ -982,10 +982,10 @@ export function AgentSetupScreen({ routeStep }: { readonly routeStep: SetupStep
           {gate === "pending" ? "Set up later" : "Close"}
         </Button>
       </header>
-      <main className="min-h-0 flex-1 overflow-y-auto px-5 pt-10 pb-8 sm:px-10 sm:pt-12">
+      <main className="window-gutters min-h-0 flex-1 overflow-y-auto pt-10 pb-8 [--side-gutter:--spacing(5)] sm:pt-12 sm:[--side-gutter:--spacing(10)]">
         <div className="mx-auto w-full max-w-[42rem]">{body}</div>
       </main>
-      <footer className="flex h-15 shrink-0 justify-center border-t border-border/60 px-5 sm:px-10">
+      <footer className="window-gutters flex h-15 shrink-0 justify-center border-t border-border/60 [--side-gutter:--spacing(5)] sm:[--side-gutter:--spacing(10)]">
         <div className="flex w-full max-w-[42rem] items-center gap-3">{footer}</div>
       </footer>
     </div>
diff --git a/apps/web/src/components/terminal/TerminalFindBar.tsx b/apps/web/src/components/terminal/TerminalFindBar.tsx
index 5c7d01877..a2546d993 100644
--- a/apps/web/src/components/terminal/TerminalFindBar.tsx
+++ b/apps/web/src/components/terminal/TerminalFindBar.tsx
@@ -93,7 +93,7 @@ export function TerminalFindBar({
       placeholder="Find in terminal"
       inputRef={inputRef}
       testIdPrefix="terminal-find"
-      className="absolute top-2 right-3 z-20"
+      className="absolute top-2 right-[calc(--spacing(3)+var(--safe-area-right))] z-20"
       canStep={query !== ""}
     />
   );
diff --git a/apps/web/src/components/theme/ui/ThemeTrialBarContent.tsx b/apps/web/src/components/theme/ui/ThemeTrialBarContent.tsx
index 2ce76f0e7..c3aa3a693 100644
--- a/apps/web/src/components/theme/ui/ThemeTrialBarContent.tsx
+++ b/apps/web/src/components/theme/ui/ThemeTrialBarContent.tsx
@@ -82,7 +82,7 @@ function TrialBar({ trial }: { readonly trial: ThemeTrial }) {
       aria-label={question}
       data-theme-trial-bar
       style={{ ...builtinThemeStyle(active.base), ...mainAreaCenterStyle }}
-      className="center-on-main-area fixed inset-x-0 top-[calc(env(safe-area-inset-top)+var(--app-titlebar-height,38px)+12px)] z-[60] mx-auto flex w-[min(460px,calc(100vw-24px))] items-center gap-3 rounded-[var(--app-radius-large)] border border-border bg-popover px-4 py-2.5 text-popover-foreground shadow-lg"
+      className="center-on-main-area fixed right-(--safe-area-right) left-(--safe-area-left) top-[calc(env(safe-area-inset-top)+var(--app-titlebar-height,38px)+12px)] z-[60] mx-auto flex w-[min(460px,calc(100vw-24px-var(--safe-area-left)-var(--safe-area-right)))] items-center gap-3 rounded-[var(--app-radius-large)] border border-border bg-popover px-4 py-2.5 text-popover-foreground shadow-lg"
       onKeyDown={(event) => {
         if (event.key === "Escape") {
           event.preventDefault();
diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx
index 427b07230..d50bb10a5 100644
--- a/apps/web/src/components/ui/alert-dialog.tsx
+++ b/apps/web/src/components/ui/alert-dialog.tsx
@@ -7,6 +7,11 @@ import { useOnScreenKeyboardInsetVars } from "~/hooks/useOnScreenKeyboardInset";
 import { cn } from "~/lib/utils";
 import { useMainAreaCenterStyle } from "~/mainAreaLayout";
 import { CoveringBackdrop } from "~/components/ui/noticeLayer";
+import {
+  BOTTOM_SHEET_SIDE_STRIPS_CLASS_NAME,
+  SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME,
+  VIEWPORT_SIDE_STRIPS_CLASS_NAME,
+} from "~/sideStrips";
 
 const AlertDialogCreateHandle = AlertDialogPrimitive.createHandle;
 
@@ -64,7 +69,7 @@ function AlertDialogBackdrop({ className, ...props }: AlertDialogPrimitive.Backd
   );
 }
 
-/** Keeps the dialog above an on-screen keyboard and centered over the page, as DialogViewport does. */
+/** Keeps the dialog above an on-screen keyboard, off the screen's side strips and centered over the page, as DialogViewport does. */
 function AlertDialogViewport({
   className,
   ...props
@@ -75,6 +80,7 @@ function AlertDialogViewport({
     <AlertDialogPrimitive.Viewport
       className={cn(
         "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center bg-white/48 p-4 pt-[calc(1rem+var(--keyboard-inset-top))] pb-[calc(1rem+var(--keyboard-inset-bottom))] backdrop-blur-[2px] dark:bg-black/28",
+        VIEWPORT_SIDE_STRIPS_CLASS_NAME,
         className,
       )}
       data-slot="alert-dialog-viewport"
@@ -112,6 +118,7 @@ function AlertDialogPopup({
             "center-on-main-area transform-[translateY(calc(-1.25rem*var(--nested-dialogs)))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-4xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] elevate-overlay transition-[scale,opacity,transform] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-4xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:transform-[translateY(--spacing(8))] data-nested:data-starting-style:transform-[translateY(--spacing(8))] data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
             bottomStickOnMobile &&
               "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:transform-[translateY(--spacing(4))] max-sm:data-starting-style:transform-[translateY(--spacing(4))] max-sm:before:hidden max-sm:before:rounded-none",
+            bottomStickOnMobile && BOTTOM_SHEET_SIDE_STRIPS_CLASS_NAME,
             className,
           )}
           data-slot="alert-dialog-popup"
@@ -146,6 +153,7 @@ function AlertDialogFooter({
       className={cn(
         "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-4xl)-1px)]",
         variant === "default" && "border-t bg-muted/72 py-4",
+        variant === "default" && SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME,
         variant === "bare" && "pb-6",
         className,
       )}
diff --git a/apps/web/src/components/ui/autocomplete.tsx b/apps/web/src/components/ui/autocomplete.tsx
index 833158c2f..025b63bf3 100644
--- a/apps/web/src/components/ui/autocomplete.tsx
+++ b/apps/web/src/components/ui/autocomplete.tsx
@@ -4,6 +4,7 @@ import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomple
 import { ChevronsUpDownIcon, XIcon } from "lucide-react";
 
 import { cn } from "~/lib/utils";
+import { useCollisionPadding } from "~/sideStrips";
 import { Input } from "~/components/ui/input";
 import { ScrollArea } from "~/components/ui/scroll-area";
 
@@ -91,6 +92,7 @@ function AutocompletePopup({
   side?: AutocompletePrimitive.Positioner.Props["side"];
   anchor?: AutocompletePrimitive.Positioner.Props["anchor"];
 }) {
+  const collisionPadding = useCollisionPadding();
   return (
     <AutocompletePrimitive.Portal>
       <AutocompletePrimitive.Positioner
@@ -98,6 +100,7 @@ function AutocompletePopup({
         alignOffset={alignOffset}
         anchor={anchor}
         className="z-50 select-none"
+        collisionPadding={collisionPadding}
         data-slot="autocomplete-positioner"
         side={side}
         sideOffset={sideOffset}
diff --git a/apps/web/src/components/ui/combobox.tsx b/apps/web/src/components/ui/combobox.tsx
index 42aedba91..fbabb558e 100644
--- a/apps/web/src/components/ui/combobox.tsx
+++ b/apps/web/src/components/ui/combobox.tsx
@@ -5,6 +5,7 @@ import { CheckIcon, ChevronsUpDownIcon, XIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "~/lib/utils";
+import { useCollisionPadding } from "~/sideStrips";
 import { Input } from "~/components/ui/input";
 import { ScrollArea } from "~/components/ui/scroll-area";
 
@@ -154,6 +155,7 @@ function ComboboxPopup({
   const { chipsRef } = React.use(ComboboxContext);
   const anchor = anchorProp ?? chipsRef;
 
+  const collisionPadding = useCollisionPadding();
   return (
     <ComboboxPrimitive.Portal>
       <ComboboxPrimitive.Positioner
@@ -161,6 +163,7 @@ function ComboboxPopup({
         alignOffset={alignOffset}
         anchor={anchor}
         className="z-50 select-none"
+        collisionPadding={collisionPadding}
         data-slot="combobox-positioner"
         side={side}
         sideOffset={sideOffset}
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 718068204..328f883b9 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -6,6 +6,7 @@ import type * as React from "react";
 import { cn } from "~/lib/utils";
 import { useMainAreaCenterStyle } from "~/mainAreaLayout";
 import { CoveringBackdrop } from "~/components/ui/noticeLayer";
+import { VIEWPORT_SIDE_STRIPS_CLASS_NAME } from "~/sideStrips";
 import {
   Autocomplete,
   AutocompleteCollection,
@@ -42,7 +43,7 @@ function CommandDialogBackdrop({ className, ...props }: CommandDialogPrimitive.B
   );
 }
 
-/** Centers the palette over the page beside the sidebar, not the whole window. */
+/** Centers the palette over the page beside the sidebar, not the whole window, and off the screen's side strips. */
 function CommandDialogViewport({
   className,
   ...props
@@ -52,6 +53,7 @@ function CommandDialogViewport({
     <CommandDialogPrimitive.Viewport
       className={cn(
         "pointer-events-none fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]",
+        VIEWPORT_SIDE_STRIPS_CLASS_NAME,
         className,
       )}
       data-slot="command-dialog-viewport"
diff --git a/apps/web/src/components/ui/dialog.browser.tsx b/apps/web/src/components/ui/dialog.browser.tsx
index 4efe15c29..52505f872 100644
--- a/apps/web/src/components/ui/dialog.browser.tsx
+++ b/apps/web/src/components/ui/dialog.browser.tsx
@@ -5,7 +5,14 @@ import { afterEach, describe, expect, it, vi } from "vite-plus/test";
 import { render } from "vitest-browser-react";
 
 import { showOnScreenKeyboard } from "../../hooks/useOnScreenKeyboardInset.browser-harness";
-import { Dialog, DialogHeader, DialogPanel, DialogPopup, DialogTitle } from "./dialog";
+import {
+  Dialog,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "./dialog";
 import { nextFrames, readAfterEachPaint } from "../../lib/frameProbe.browser-harness";
 import { resetTestPage } from "../../lib/testPage.browser-harness";
 import { publishMainAreaEndInset, publishMainAreaStart } from "../../mainAreaLayout";
@@ -22,6 +29,7 @@ describe("Dialog", () => {
     vi.restoreAllMocks();
     publishMainAreaStart(0);
     publishMainAreaEndInset(0);
+    document.documentElement.style.removeProperty("--safe-area-right");
     await resetTestPage();
     await page.viewport(DESKTOP_VIEWPORT.width, DESKTOP_VIEWPORT.height);
   });
@@ -140,4 +148,47 @@ describe("Dialog", () => {
       await mounted.unmount();
     }
   });
+
+  it("keeps clear of a strip the screen holds back down its right side", async () => {
+    // An iPhone Duo's status dock hangs down the right edge of the screen.
+    const strip = 85;
+    document.documentElement.style.setProperty("--safe-area-right", `${strip}px`);
+    await page.viewport(PHONE_VIEWPORT.width, PHONE_VIEWPORT.height);
+    const mounted = await render(
+      <Dialog open>
+        <DialogPopup>
+          <DialogHeader>
+            <DialogTitle>Rename this computer</DialogTitle>
+          </DialogHeader>
+          <DialogFooter>
+            <button type="button">Save</button>
+          </DialogFooter>
+        </DialogPopup>
+      </Dialog>,
+    );
+    const rightOf = (selector: string) =>
+      document.querySelector<HTMLElement>(selector)?.getBoundingClientRect().right;
+
+    try {
+      // A phone's bottom sheet: its fill and its footer's fill run under the
+      // strip, the close button and the footer's buttons stop at it.
+      await vi.waitFor(() => {
+        expect(popupRect()?.right).toBeCloseTo(window.innerWidth, 0);
+        expect(rightOf('[data-slot="dialog-footer"]')).toBeCloseTo(window.innerWidth, 0);
+        expect(rightOf('[aria-label="Close"]')).toBeLessThanOrEqual(window.innerWidth - strip);
+        expect(rightOf('[data-slot="dialog-footer"] button')).toBeLessThanOrEqual(
+          window.innerWidth - strip,
+        );
+      });
+
+      // A centered dialog pushed toward that edge stops 1rem short of the strip.
+      await page.viewport(DESKTOP_VIEWPORT.width, DESKTOP_VIEWPORT.height);
+      publishMainAreaStart(DESKTOP_VIEWPORT.width - 200);
+      await vi.waitFor(() => {
+        expect(popupRect()?.right).toBeCloseTo(window.innerWidth - strip - 16, 0);
+      });
+    } finally {
+      await mounted.unmount();
+    }
+  });
 });
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 5694d6767..bdd8042ec 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -8,6 +8,11 @@ import { useMainAreaCenterStyle } from "~/mainAreaLayout";
 import { CoveringBackdrop } from "~/components/ui/noticeLayer";
 import { Button } from "~/components/ui/button";
 import { ScrollArea } from "~/components/ui/scroll-area";
+import {
+  BOTTOM_SHEET_SIDE_STRIPS_CLASS_NAME,
+  SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME,
+  VIEWPORT_SIDE_STRIPS_CLASS_NAME,
+} from "~/sideStrips";
 
 const DialogCreateHandle = DialogPrimitive.createHandle;
 
@@ -40,8 +45,9 @@ function DialogBackdrop({ className, ...props }: DialogPrimitive.Backdrop.Props)
 /**
  * Lays the dialog out in the part of the screen the on-screen keyboard leaves
  * free: iPhone Safari slides the keyboard over the page instead of shrinking
- * it, so without this a bottom sheet's field sits under the keys. Mounted only
- * while the dialog is open, so closed dialogs don't watch the keyboard.
+ * it, so without this a bottom sheet's field sits under the keys. A centered
+ * dialog also keeps clear of the screen's side strips (~/sideStrips). Mounted
+ * only while the dialog is open, so closed dialogs don't watch the keyboard.
  */
 function DialogViewport({ className, ...props }: Omit<DialogPrimitive.Viewport.Props, "style">) {
   const keyboardInsetVars = useOnScreenKeyboardInsetVars(true);
@@ -50,6 +56,7 @@ function DialogViewport({ className, ...props }: Omit<DialogPrimitive.Viewport.P
     <DialogPrimitive.Viewport
       className={cn(
         "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center bg-white/48 p-4 pt-[calc(1rem+var(--keyboard-inset-top))] pb-[calc(1rem+var(--keyboard-inset-bottom))] backdrop-blur-[2px] dark:bg-black/28",
+        VIEWPORT_SIDE_STRIPS_CLASS_NAME,
         className,
       )}
       data-slot="dialog-viewport"
@@ -83,6 +90,7 @@ function DialogPopup({
             "center-on-main-area transform-[translateY(calc(-1.25rem*var(--nested-dialogs)))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-4xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] elevate-overlay transition-[scale,opacity,transform] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-4xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:transform-[translateY(--spacing(8))] data-nested:data-starting-style:transform-[translateY(--spacing(8))] data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
             bottomStickOnMobile &&
               "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:transform-[translateY(--spacing(4))] max-sm:data-starting-style:transform-[translateY(--spacing(4))] max-sm:before:hidden max-sm:before:rounded-none",
+            bottomStickOnMobile && BOTTOM_SHEET_SIDE_STRIPS_CLASS_NAME,
             className,
           )}
           data-slot="dialog-popup"
@@ -92,7 +100,7 @@ function DialogPopup({
           {showCloseButton && (
             <DialogPrimitive.Close
               aria-label="Close"
-              className="absolute end-2 top-2"
+              className="absolute top-2 right-[calc(--spacing(2)+var(--sheet-strip-right,0px))]"
               render={<Button size="icon" variant="ghost" />}
             >
               <XIcon />
@@ -129,6 +137,7 @@ function DialogFooter({
       className={cn(
         "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-4xl)-1px)]",
         variant === "default" && "border-t bg-muted/72 py-4",
+        variant === "default" && SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME,
         variant === "bare" &&
           "in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6",
         className,
diff --git a/apps/web/src/components/ui/drawer.tsx b/apps/web/src/components/ui/drawer.tsx
index 88ff04cfa..13ee14180 100644
--- a/apps/web/src/components/ui/drawer.tsx
+++ b/apps/web/src/components/ui/drawer.tsx
@@ -52,13 +52,16 @@ function DrawerViewport({ className, ...props }: Omit<DrawerPrimitive.Viewport.P
  *
  * `side="bottom"` is a phone sheet: full width, as tall as its content up to
  * most of the screen, rounded on top, swiped down to close (the Drawer's
- * default swipe direction).
+ * default swipe direction). Its fill runs under the strips a screen keeps down
+ * its sides (--safe-area-left and --safe-area-right in index.css) and its
+ * content is padded out of them.
  */
 function DrawerPopup({
   className,
   children,
   side = "left",
   keepMounted = false,
+  backdrop = true,
   backdropProps,
   viewportClassName,
   ...props
@@ -66,20 +69,34 @@ function DrawerPopup({
   side?: "left" | "right" | "bottom";
   /** Keeps the panel in the page while closed, so what it holds keeps its state. */
   keepMounted?: boolean;
+  /**
+   * Whether the page dims behind the panel and a press on it is the
+   * backdrop's. Without one the panel floats: the page beside it stays as it
+   * is and takes its own presses.
+   */
+  backdrop?: boolean;
   backdropProps?: DrawerPrimitive.Backdrop.Props | undefined;
   viewportClassName?: string | undefined;
 }) {
   return (
     <DrawerPrimitive.Portal keepMounted={keepMounted}>
-      <DrawerPrimitive.Backdrop
-        {...backdropProps}
-        className={cn(
-          "fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:transition-none",
-          typeof backdropProps?.className === "string" ? backdropProps.className : undefined,
-        )}
-        data-slot="drawer-backdrop"
-        render={(renderProps, state) => <CoveringBackdrop {...renderProps} open={state.open} />}
-      />
+      {backdrop ? (
+        <DrawerPrimitive.Backdrop
+          // Always drawn when asked for. The whole app sits inside the command
+          // palette's dialog (CommandPalette wraps it so its triggers work
+          // anywhere), and Base UI leaves the backdrop out of a drawer inside
+          // another dialog: the page beside the panel stayed bright, and a
+          // press on it did not close a sheet that closes from its backdrop.
+          forceRender
+          {...backdropProps}
+          className={cn(
+            "fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:transition-none",
+            typeof backdropProps?.className === "string" ? backdropProps.className : undefined,
+          )}
+          data-slot="drawer-backdrop"
+          render={(renderProps, state) => <CoveringBackdrop {...renderProps} open={state.open} />}
+        />
+      ) : null}
       <DrawerViewport
         className={cn(
           side === "left"
@@ -97,7 +114,7 @@ function DrawerPopup({
               ? "h-full border-e [transform:translateX(var(--drawer-swipe-movement-x))] data-ending-style:[transform:translateX(-100%)] data-starting-style:[transform:translateX(-100%)]"
               : side === "right"
                 ? "h-full border-s [transform:translateX(var(--drawer-swipe-movement-x))] data-ending-style:[transform:translateX(100%)] data-starting-style:[transform:translateX(100%)]"
-                : "max-h-[88dvh] w-full rounded-t-2xl border-t pb-(--safe-area-bottom) [transform:translateY(var(--drawer-swipe-movement-y))] data-ending-style:[transform:translateY(100%)] data-starting-style:[transform:translateY(100%)]",
+                : "max-h-[88dvh] w-full rounded-t-2xl border-t pr-safe pb-(--safe-area-bottom) pl-safe [transform:translateY(var(--drawer-swipe-movement-y))] data-ending-style:[transform:translateY(100%)] data-starting-style:[transform:translateY(100%)]",
             className,
           )}
           data-slot="drawer-popup"
diff --git a/apps/web/src/components/ui/menu.tsx b/apps/web/src/components/ui/menu.tsx
index e364a0be4..670e8846e 100644
--- a/apps/web/src/components/ui/menu.tsx
+++ b/apps/web/src/components/ui/menu.tsx
@@ -5,6 +5,7 @@ import { ChevronRightIcon, SearchIcon } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "~/lib/utils";
+import { useCollisionPadding } from "~/sideStrips";
 
 const MenuCreateHandle = MenuPrimitive.createHandle;
 
@@ -38,6 +39,7 @@ function MenuPopup({
   anchor?: MenuPrimitive.Positioner.Props["anchor"];
   backdrop?: boolean;
 }) {
+  const collisionPadding = useCollisionPadding();
   return (
     <MenuPrimitive.Portal>
       {backdrop ? (
@@ -48,6 +50,7 @@ function MenuPopup({
         alignOffset={alignOffset}
         anchor={anchor}
         className="z-50"
+        collisionPadding={collisionPadding}
         data-slot="menu-positioner"
         side={side}
         sideOffset={sideOffset}
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index ae8899200..ffadb39b4 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -3,6 +3,7 @@
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 
 import { cn } from "~/lib/utils";
+import { useCollisionPadding } from "~/sideStrips";
 
 const PopoverCreateHandle = PopoverPrimitive.createHandle;
 
@@ -28,7 +29,7 @@ function PopoverPopup({
   tooltipStyle = false,
   anchor,
   collisionAvoidance,
-  collisionPadding,
+  collisionPadding: requestedCollisionPadding,
   ...props
 }: PopoverPrimitive.Popup.Props & {
   /**
@@ -47,10 +48,11 @@ function PopoverPopup({
   /** How the popup moves when it would leave the screen; the positioner's
    *  default flips it to the other alignment. */
   collisionAvoidance?: PopoverPrimitive.Positioner.Props["collisionAvoidance"];
-  /** The closest the popup may come to a screen edge. */
+  /** The closest the popup may come to a screen edge (and to a screen's side strips). */
   collisionPadding?: PopoverPrimitive.Positioner.Props["collisionPadding"];
   positionerClassName?: string;
 }) {
+  const collisionPadding = useCollisionPadding(requestedCollisionPadding);
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
diff --git a/apps/web/src/components/ui/previewCard.tsx b/apps/web/src/components/ui/previewCard.tsx
index 1f33f554c..202c6f5a9 100644
--- a/apps/web/src/components/ui/previewCard.tsx
+++ b/apps/web/src/components/ui/previewCard.tsx
@@ -1,6 +1,7 @@
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
 
 import { cn } from "~/lib/utils";
+import { useCollisionPadding } from "~/sideStrips";
 
 /**
  * The hover-card primitive, distinct from Tooltip on purpose.
@@ -35,6 +36,7 @@ export function PreviewCardPopup({
   sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"];
   align?: PreviewCardPrimitive.Positioner.Props["align"];
 }) {
+  const collisionPadding = useCollisionPadding();
   return (
     <PreviewCardPrimitive.Portal>
       <PreviewCardPrimitive.Positioner
@@ -42,6 +44,7 @@ export function PreviewCardPopup({
         side={side}
         sideOffset={sideOffset}
         className="z-50 max-w-(--available-width)"
+        collisionPadding={collisionPadding}
         data-slot="preview-card-positioner"
       >
         <PreviewCardPrimitive.Popup
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index a50c343a0..47696d886 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -8,6 +8,7 @@ import { ChevronDownIcon, ChevronsUpDownIcon, ChevronUpIcon } from "lucide-react
 import type * as React from "react";
 
 import { cn } from "~/lib/utils";
+import { useCollisionPadding, useSideStrips } from "~/sideStrips";
 
 const Select = SelectPrimitive.Root;
 
@@ -157,14 +158,21 @@ function SelectPopup({
   matchTriggerWidth?: boolean;
   anchor?: SelectPrimitive.Positioner.Props["anchor"];
 }) {
+  const collisionPadding = useCollisionPadding();
+  // Lining the chosen item up with the trigger places the list by a path of
+  // Base UI's own that only keeps 5px off the window's edges, so on a screen
+  // with side strips the list opens beside the trigger instead.
+  const strips = useSideStrips();
+  const besideStrips = strips.left > 0 || strips.right > 0;
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Positioner
         align={align}
-        alignItemWithTrigger={alignItemWithTrigger}
+        alignItemWithTrigger={alignItemWithTrigger && !besideStrips}
         alignOffset={alignOffset}
         anchor={anchor}
         className="z-50 select-none"
+        collisionPadding={collisionPadding}
         data-slot="select-positioner"
         side={side}
         sideOffset={sideOffset}
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index d6a096ae1..650a36950 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -200,6 +200,14 @@ function SidebarProvider({
 }) {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
+  // The phone's sheet is put away when the layout stops being a phone's (a
+  // folding phone opens, a browser window widens), so coming back to the
+  // phone layout doesn't land the sheet on top of the page again.
+  const [wasMobile, setWasMobile] = React.useState(isMobile);
+  if (wasMobile !== isMobile) {
+    setWasMobile(isMobile);
+    if (!isMobile) setOpenMobile(false);
+  }
 
   // This is the internal state of the sidebar. A caller that keeps the state
   // somewhere lasting (the app's thread list remembers it across launches)
diff --git a/apps/web/src/components/ui/toast.tsx b/apps/web/src/components/ui/toast.tsx
index 4be587aba..19b45b103 100644
--- a/apps/web/src/components/ui/toast.tsx
+++ b/apps/web/src/components/ui/toast.tsx
@@ -38,6 +38,7 @@ import { useComposerDraftStore } from "~/composerDraftStore";
 import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
 import { usePageAttended } from "~/lib/pageAttention";
 import { useRightPanelInsetStyle } from "~/mainAreaLayout";
+import { useCollisionPadding } from "~/sideStrips";
 import { resolveThreadRouteTarget } from "~/threadRoutes";
 import { useNoticesRaisedAboveBackdrops } from "./noticeLayer";
 import {
@@ -796,7 +797,7 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
           // A dimmed backdrop is the exception: the user is in a dialog, and
           // a notice raised then must not sit blurred underneath it.
           raisedAboveBackdrops ? "z-60" : "z-40",
-          "fixed mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-[20rem] [--toast-header-offset:52px] [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(6)]",
+          "fixed mx-auto flex w-[calc(100%-var(--toast-inset)*2-var(--safe-area-left)-var(--safe-area-right))] max-w-[20rem] [--toast-header-offset:52px] [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(6)]",
           // Vertical positioning
           "data-[position*=top]:top-[calc(var(--toast-inset)+var(--toast-header-offset))]",
           "data-[position*=bottom]:bottom-(--toast-inset)",
@@ -804,10 +805,13 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
           // right panel rather than on top of it: the panel publishes its width
           // (mainAreaLayout.ts, carried here as `--right-panel-inset`, 0px when
           // closed) because this viewport is fixed to the window and the
-          // layout cannot push it aside.
-          "data-[position*=left]:left-(--toast-inset)",
-          "data-[position*=right]:right-[calc(var(--toast-inset)+var(--right-panel-inset,0px))]",
-          "data-[position*=center]:-translate-x-1/2 data-[position*=center]:left-1/2",
+          // layout cannot push it aside. They also stay off the strips a
+          // screen keeps down its sides (--safe-area-left and
+          // --safe-area-right in index.css); an open panel that covers the
+          // right strip already accounts for it.
+          "data-[position*=left]:left-[calc(var(--toast-inset)+var(--safe-area-left))]",
+          "data-[position*=right]:right-[calc(var(--toast-inset)+max(var(--right-panel-inset,0px),var(--safe-area-right)))]",
+          "data-[position*=center]:-translate-x-1/2 data-[position*=center]:left-[calc(50%+(var(--safe-area-left)-var(--safe-area-right))/2)]",
         )}
         data-position={position}
         data-slot="toast-viewport"
@@ -967,6 +971,7 @@ function AnchoredToastProvider({ children, ...props }: Toast.Provider.Props) {
 }
 
 function AnchoredToasts() {
+  const collisionPadding = useCollisionPadding();
   const { toasts } = Toast.useToastManager<ThreadToastData>();
   const activeThreadRef = useActiveThreadRefFromRoute();
 
@@ -988,6 +993,7 @@ function AnchoredToasts() {
             return (
               <Toast.Positioner
                 className="z-100 max-w-[min(--spacing(64),var(--available-width))]"
+                collisionPadding={collisionPadding}
                 data-slot="toast-positioner"
                 key={toast.id}
                 sideOffset={positionerProps.sideOffset ?? 4}
diff --git a/apps/web/src/components/usage/UsageView.tsx b/apps/web/src/components/usage/UsageView.tsx
index e45a3b016..60379bc8b 100644
--- a/apps/web/src/components/usage/UsageView.tsx
+++ b/apps/web/src/components/usage/UsageView.tsx
@@ -234,7 +234,7 @@ export function UsageView() {
       {/* The pane-wide element scrolls so the scrollbar hugs the pane's edge
           (like Settings); the reading column centers inside it. */}
       <div
-        className="min-h-0 flex-1 overflow-y-auto"
+        className="page-gutters min-h-0 flex-1 overflow-y-auto"
         data-testid="usage-scroll"
         {...glassPage.content}
       >
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index bb1062392..6225bb730 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -241,6 +241,20 @@ html.electron.mac:not([data-marketing-capture]) {
   --safe-area-bottom: 0px;
 }
 
+/* The strips down the sides of the screen that the device keeps for itself:
+   the notch side of a phone held sideways, and the status dock down the right
+   edge of an iPhone Duo (clock, battery and signal), which is there in every
+   posture. The strip runs the whole height, though the dock only hangs from
+   the top of it; nothing on the web says how far down the dock reaches.
+   A surface that touches a side of the window carries its fill into the strip
+   and keeps its controls out of it: a layer that slides in from the right
+   pads by --safe-area-right, a layer fixed to the window stays that far off
+   the edge. 0 on every screen without one. */
+:root {
+  --safe-area-left: env(safe-area-inset-left, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+}
+
 /* Safe-area inset utilities for surfaces that opt into edge-to-edge rendering.
    Insets resolve to 0 when the browser already constrains the layout viewport
    to the safe area. */
@@ -251,26 +265,53 @@ html.electron.mac:not([data-marketing-capture]) {
   padding-bottom: max(env(safe-area-inset-bottom), 0px);
 }
 @utility pl-safe {
-  padding-left: max(env(safe-area-inset-left), 0px);
+  padding-left: var(--safe-area-left);
 }
 @utility pr-safe {
-  padding-right: max(env(safe-area-inset-right), 0px);
+  padding-right: var(--safe-area-right);
+}
+
+/* Side padding for a surface that scrolls or paints to the window's edge and
+   keeps what it holds off the screen's side strips: its own gutter plus the
+   strip. Set the gutter beside it, `[--side-gutter:--spacing(4)]` (none by
+   default; it is not inherited, so a surface inside another starts from 0).
+   - window-gutters: a surface as wide as the window (setup, pairing).
+   - page-gutters: a page's body beside the rail and the list. Its right edge
+     is the window's; its left edge is only on a phone, where no list sits
+     beside it. */
+@property --side-gutter {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@utility window-gutters {
+  padding-right: calc(var(--side-gutter) + var(--safe-area-right));
+  padding-left: calc(var(--side-gutter) + var(--safe-area-left));
+}
+@utility page-gutters {
+  padding-right: calc(var(--side-gutter) + var(--safe-area-right));
+  padding-left: var(--side-gutter);
+  @variant phone {
+    padding-left: calc(var(--side-gutter) + var(--safe-area-left));
+  }
 }
 
 /* Centers a layer that is portaled to the window (a dialog, the command
    palette) over the page beside the thread list and the right panel, not over
-   the whole window. The layer lays itself out centered on the window and
-   carries --main-area-offset inline (useMainAreaCenterStyle in
-   mainAreaLayout.ts); this slides it that far, but no closer than 1rem to the
-   window's edge, and not at all once it is as wide as the window (a phone's
-   bottom sheet). Percentages in translate are the layer's own width. Leave
-   translate out of the layer's transitions (slide it with transform): a popup
-   gliding to a new spot after a resize pokes past the window's edge. */
+   the whole window. The layer lays itself out centered between the window's
+   side strips (--safe-area-left and --safe-area-right, so on the window where
+   there are none) and carries --main-area-offset inline
+   (useMainAreaCenterStyle in mainAreaLayout.ts); this slides it that far, but
+   no closer than 1rem to a strip or the window's edge, and not at all once it
+   is as wide as the window (a phone's bottom sheet). Percentages in translate
+   are the layer's own width. Leave translate out of the layer's transitions
+   (slide it with transform): a popup gliding to a new spot after a resize
+   pokes past the window's edge. */
 @utility center-on-main-area {
   --tw-translate-x: clamp(
-    min(0px, 50% - 50vw + 1rem),
+    min(0px, 50% - 50vw + 1rem + (var(--safe-area-left) + var(--safe-area-right)) / 2),
     var(--main-area-offset, 0px),
-    max(0px, 50vw - 50% - 1rem)
+    max(0px, 50vw - 50% - 1rem - (var(--safe-area-left) + var(--safe-area-right)) / 2)
   );
   translate: var(--tw-translate-x) var(--tw-translate-y, 0);
 }
diff --git a/apps/web/src/mainAreaLayout.ts b/apps/web/src/mainAreaLayout.ts
index 4ee9c1f27..8d854f7d4 100644
--- a/apps/web/src/mainAreaLayout.ts
+++ b/apps/web/src/mainAreaLayout.ts
@@ -1,6 +1,8 @@
 import { type CSSProperties, type RefObject, useEffect } from "react";
 import { create } from "zustand";
 
+import { useSideStrips } from "./sideStrips";
+
 /**
  * Where the main area sits in the window: the page beside the thread list on
  * the left and the right panel on the right. Layers portaled to the body are
@@ -75,11 +77,20 @@ export function usePublishMainAreaStart(panelRef: RefObject<HTMLElement | null>)
 
 /**
  * Inline style for a layer that centers itself with `center-on-main-area`:
- * how far right of the window's center the page's center sits (negative when
- * it sits left of it).
+ * how far right of the layer's own resting center the page's center sits
+ * (negative when it sits left of it). The layer rests centered between the
+ * screen's side strips (sideStrips.ts), which is the window's center on every
+ * screen without them, so the page's edges are counted from the strips: a
+ * list or a panel that covers a strip only pushes the page by what it takes
+ * beyond it.
  */
 export function useMainAreaCenterStyle(): CSSProperties {
-  const offset = useMainAreaStore((bounds) => Math.round((bounds.start - bounds.endInset) / 2));
+  const strips = useSideStrips();
+  const offset = useMainAreaStore((bounds) =>
+    Math.round(
+      (Math.max(bounds.start - strips.left, 0) - Math.max(bounds.endInset - strips.right, 0)) / 2,
+    ),
+  );
   return { "--main-area-offset": `${offset}px` } as CSSProperties;
 }
 
diff --git a/apps/web/src/rightPanelLayout.ts b/apps/web/src/rightPanelLayout.ts
index ffc362ecb..f2b1e3644 100644
--- a/apps/web/src/rightPanelLayout.ts
+++ b/apps/web/src/rightPanelLayout.ts
@@ -38,14 +38,20 @@ export const COMPOSER_COMPACT_MIN_LEFT_CONTROLS_WIDTH_PX = 208;
 // them to let presses over the header reach the header.
 const RIGHT_PANEL_SHEET_BELOW_HEADER_CLASS_NAME =
   "pointer-events-auto mt-[var(--chat-header-bottom)] h-[calc(100%-var(--chat-header-bottom))] max-h-[calc(100%-var(--chat-header-bottom))] p-0";
+// Both sheets sit against the window's right edge, so on a screen with a
+// strip down that side (--safe-area-right in index.css: an iPhone Duo's status
+// dock) the sheet's fill runs under the strip and RightPanelSheet pads the
+// panel out of it. Every width below is the panel's own plus that strip, so
+// the panel keeps its size instead of losing the strip's width.
+//
 // Diff sheet width tiers: desktop keeps the fixed panel, the 640-760px band
 // keeps the near-full 88vw sheet (disjoint `sm:max-[760px]:` so no cascade
 // ordering is relied on), and phones go full width.
-export const RIGHT_PANEL_SHEET_CLASS_NAME = `${RIGHT_PANEL_SHEET_BELOW_HEADER_CLASS_NAME} w-[min(42vw,28rem)] min-w-80 max-w-[28rem] sm:max-[760px]:w-[min(88vw,24rem)] sm:max-[760px]:min-w-0 max-sm:w-full max-sm:min-w-0 max-sm:max-w-none`;
-// The rail overlays as a partial sheet: 400px where it fits, and as much of
+export const RIGHT_PANEL_SHEET_CLASS_NAME = `${RIGHT_PANEL_SHEET_BELOW_HEADER_CLASS_NAME} w-[calc(min(42vw,28rem)+var(--safe-area-right))] min-w-[calc(20rem+var(--safe-area-right))] max-w-[calc(28rem+var(--safe-area-right))] sm:max-[760px]:w-[min(88vw,calc(24rem+var(--safe-area-right)))] sm:max-[760px]:min-w-0 max-sm:w-full max-sm:min-w-0 max-sm:max-w-none`;
+// The rail overlays as a partial sheet: 330px where it fits, and as much of
 // the viewport as fits below that, so a slice of the conversation stays
 // visible and tappable to dismiss.
-export const RIGHT_PANEL_RAIL_SHEET_CLASS_NAME = `${RIGHT_PANEL_SHEET_BELOW_HEADER_CLASS_NAME} w-[min(92vw,var(--right-panel-rail-width))] max-w-[var(--right-panel-rail-width)]`;
+export const RIGHT_PANEL_RAIL_SHEET_CLASS_NAME = `${RIGHT_PANEL_SHEET_BELOW_HEADER_CLASS_NAME} w-[min(92vw,calc(var(--right-panel-rail-width)+var(--safe-area-right)))] max-w-[calc(var(--right-panel-rail-width)+var(--safe-area-right))]`;
 export const RIGHT_PANEL_SHEET_VIEWPORT_CLASS_NAME = "pointer-events-none";
 export const RIGHT_PANEL_SHEET_BACKDROP_CLASS_NAME = "mt-[var(--chat-header-bottom)]";
 
diff --git a/apps/web/src/sideStrips.browser.tsx b/apps/web/src/sideStrips.browser.tsx
new file mode 100644
index 000000000..0be3398e8
--- /dev/null
+++ b/apps/web/src/sideStrips.browser.tsx
@@ -0,0 +1,44 @@
+import "./index.css";
+
+import { page } from "vite-plus/test/browser";
+import { afterEach, describe, expect, it, vi } from "vite-plus/test";
+import { render } from "vitest-browser-react";
+
+import { Popover, PopoverPopup, PopoverTrigger } from "./components/ui/popover";
+import { resetTestPage } from "./lib/testPage.browser-harness";
+
+describe("side strips", () => {
+  afterEach(async () => {
+    document.documentElement.style.removeProperty("--safe-area-right");
+    await resetTestPage();
+  });
+
+  it("keeps a popup opening beside its button off a strip down the window's right side", async () => {
+    // An iPhone Duo's status dock hangs down the right edge of the screen.
+    const strip = 85;
+    const mounted = await render(
+      <Popover>
+        <PopoverTrigger className="fixed top-2 right-24">Branch</PopoverTrigger>
+        <PopoverPopup className="w-64">Switch branch</PopoverPopup>
+      </Popover>,
+    );
+    const popupRight = () =>
+      document.querySelector('[data-slot="popover-popup"]')?.getBoundingClientRect().right;
+
+    try {
+      await page.getByRole("button", { name: "Branch" }).click();
+      // Too wide to sit centered under its button: it stops just short of the window's edge.
+      await vi.waitFor(() => {
+        expect(popupRight()).toBeCloseTo(window.innerWidth - 5, 0);
+      });
+
+      // The strip appears (the phone unfolds, or turns): the popup moves clear of it.
+      document.documentElement.style.setProperty("--safe-area-right", `${strip}px`);
+      await vi.waitFor(() => {
+        expect(popupRight()).toBeCloseTo(window.innerWidth - strip - 5, 0);
+      });
+    } finally {
+      await mounted.unmount();
+    }
+  });
+});
diff --git a/apps/web/src/sideStrips.ts b/apps/web/src/sideStrips.ts
new file mode 100644
index 000000000..13595ad80
--- /dev/null
+++ b/apps/web/src/sideStrips.ts
@@ -0,0 +1,107 @@
+import type { Popover } from "@base-ui/react/popover";
+import { useMemo } from "react";
+import { create } from "zustand";
+
+/**
+ * The strips a screen holds back down its sides: the notch side of a phone
+ * held sideways, and the status dock (clock, battery, signal) down the right
+ * edge of an iPhone Duo, folded or open. `--safe-area-left` and
+ * `--safe-area-right` in index.css carry their widths, 0 on every other
+ * screen, where nothing here changes anything.
+ *
+ * A surface that touches a side of the window carries its fill into the strip
+ * and keeps its controls out of it; a layer fixed to the window stays off the
+ * strip. CSS does that with the variables (and the class names below). What is
+ * placed by script (a menu or popover beside its button, a dialog centered
+ * over the page) reads the widths in pixels from here.
+ */
+export interface SideStrips {
+  readonly left: number;
+  readonly right: number;
+}
+
+const useSideStripsStore = create<SideStrips>()(() => ({ left: 0, right: 0 }));
+
+/**
+ * Follows the strips' widths without ever asking for them: a hidden box as
+ * wide as the right strip and as tall as the left one, whose size the browser
+ * reports when it changes (the phone folds, unfolds or turns). No resize
+ * listener and no forced layout, so a desktop window being dragged pays
+ * nothing for it.
+ */
+function watchSideStrips(): void {
+  if (typeof document === "undefined" || typeof ResizeObserver === "undefined") return;
+  const probe = document.createElement("div");
+  probe.setAttribute("aria-hidden", "true");
+  probe.dataset.sideStripsProbe = "";
+  probe.style.cssText =
+    "position:fixed;top:0;left:0;visibility:hidden;pointer-events:none;width:var(--safe-area-right,0px);height:var(--safe-area-left,0px)";
+  new ResizeObserver(() => {
+    const { width, height } = probe.getBoundingClientRect();
+    const current = useSideStripsStore.getState();
+    if (current.left !== height || current.right !== width) {
+      useSideStripsStore.setState({ left: height, right: width });
+    }
+  }).observe(probe);
+  // On the root, not the body: tests empty the body between runs.
+  document.documentElement.appendChild(probe);
+}
+
+watchSideStrips();
+
+/** The strips' widths in px, as last reported. */
+export function readSideStrips(): SideStrips {
+  return useSideStripsStore.getState();
+}
+
+/** The strips' widths in px; re-renders when the screen's strips change. */
+export function useSideStrips(): SideStrips {
+  return useSideStripsStore();
+}
+
+type CollisionPadding = Popover.Positioner.Props["collisionPadding"];
+
+/** Base UI's own gap between a popup and the window's edge, when none is asked for. */
+const DEFAULT_COLLISION_PADDING_PX = 5;
+
+/**
+ * The closest a popup placed beside its button (a menu, a popover, a select's
+ * list) may come to the window's edges: what its caller asked for, kept that
+ * far off the screen's side strips too. Pass the result to the positioner's
+ * `collisionPadding`. Without strips it is the caller's own value, untouched.
+ */
+export function useCollisionPadding(padding?: CollisionPadding): CollisionPadding {
+  const { left, right } = useSideStripsStore();
+  return useMemo(() => {
+    if (left === 0 && right === 0) return padding;
+    if (padding === undefined || typeof padding === "number") {
+      const gap = padding ?? DEFAULT_COLLISION_PADDING_PX;
+      return { top: gap, bottom: gap, left: gap + left, right: gap + right };
+    }
+    return { ...padding, left: (padding.left ?? 0) + left, right: (padding.right ?? 0) + right };
+  }, [left, padding, right]);
+}
+
+/**
+ * A centered layer's viewport: the layer stays a rem off each strip. Add it
+ * after the viewport's own `p-4`.
+ */
+export const VIEWPORT_SIDE_STRIPS_CLASS_NAME =
+  "pr-[calc(1rem+var(--safe-area-right))] pl-[calc(1rem+var(--safe-area-left))]";
+
+/**
+ * A phone's bottom sheet (a dialog below `sm`): it is as wide as the window,
+ * so its fill runs under the strips and its content is padded out of them. It
+ * says how far in `--sheet-strip-left` and `--sheet-strip-right`, for the
+ * parts that reach its edges themselves: a footer's fill
+ * (SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME) and the close button.
+ */
+export const BOTTOM_SHEET_SIDE_STRIPS_CLASS_NAME =
+  "max-sm:[--sheet-strip-left:var(--safe-area-left)] max-sm:[--sheet-strip-right:var(--safe-area-right)] max-sm:pr-(--sheet-strip-right) max-sm:pl-(--sheet-strip-left)";
+
+/**
+ * A filled footer inside such a sheet: the fill reaches the sheet's edges,
+ * the buttons stay out of the strips. Goes after the footer's `px-6`.
+ */
+export const SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME =
+  "-mr-(--sheet-strip-right,0px) -ml-(--sheet-strip-left,0px) pr-[calc(--spacing(6)+var(--sheet-strip-right,0px))] pl-[calc(--spacing(6)+var(--sheet-strip-left,0px))]";
diff --git a/docs/design/design-language.md b/docs/design/design-language.md
index ba83e16b5..7447d04e7 100644
--- a/docs/design/design-language.md
+++ b/docs/design/design-language.md
@@ -87,6 +87,20 @@ The elevation ladder in `index.css` (deepest to highest; dark / light):
   the browser or side panels docked beside it. A rule there would meet the list's divider in a square T, so
   the divider runs as one clean line from the panel's top to its bottom.
   (The phone header, with no list beside it, keeps its rule.)
+- **Controls keep off a screen's side strips.** Some screens hold a strip
+  back down a side: the notch side of a phone held sideways, and the status
+  dock (clock, battery, signal) down the right edge of an iPhone Duo, folded
+  or open. The strip runs the screen's whole height (`--safe-area-left` and
+  `--safe-area-right` in `index.css`, 0 everywhere else), though the dock only
+  hangs from the top of it. A surface that touches that side of the window
+  carries its fill into the strip and keeps its controls out: headers, the
+  composer, a page's body (`page-gutters`), the right panel's sheet, a
+  phone's bottom sheets.
+  A layer fixed to the window (a dialog, a toast, the command palette) stays
+  off it, and so does a menu or popover opening beside its button
+  (`sideStrips.ts`). The conversation is the one thing that runs
+  full width: messages scroll under the dock, the way a page scrolls under a
+  phone's status bar.
 - **Each destination brings its own list** (`destinationLists.tsx`): the
   thread inbox on Threads, your chats on General Chats, computers on Fleet,
   the sections on Settings. Pull Requests and Usage have none and take the

From d2dc2ba062d95ad657c7646a9a81a4360907680a Mon Sep 17 00:00:00 2001
From: Badcuban <108198679+badcuban@users.noreply.github.com>
Date: Sat, 14 Nov 2026 11:36:56 -0500
Subject: [PATCH 2/2] fix(web): side-strip styles fit the startup size budget

The side-strip rules put the startup closure 111 B over its gzip budget
in CI. The one-off arbitrary classes become a few named utilities:
dialog, alert dialog, command palette and image viewer viewports and the
terminal's button row use window-gutters, and a phone's bottom sheet and
its footer use sheet-strips and sheet-footer-strips. Toasts keep clear
of the right strip only, the one position the app uses.
---
 .../src/components/ThreadTerminalDrawer.tsx    |  2 +-
 .../components/chat/ExpandedImageDialog.tsx    |  2 +-
 apps/web/src/components/ui/alert-dialog.tsx    |  6 +++---
 apps/web/src/components/ui/command.tsx         |  2 +-
 apps/web/src/components/ui/dialog.tsx          |  6 +++---
 apps/web/src/components/ui/toast.tsx           | 13 ++++++-------
 apps/web/src/index.css                         | 15 +++++++++++++++
 apps/web/src/sideStrips.ts                     | 18 ++++++++----------
 8 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/components/ThreadTerminalDrawer.tsx b/apps/web/src/components/ThreadTerminalDrawer.tsx
index 17e0603db..997e05e93 100644
--- a/apps/web/src/components/ThreadTerminalDrawer.tsx
+++ b/apps/web/src/components/ThreadTerminalDrawer.tsx
@@ -1846,7 +1846,7 @@ export default function ThreadTerminalDrawer({
         <div className="h-px w-full bg-transparent transition-colors group-hover/terminal-edge:bg-ring group-focus-visible/terminal-edge:bg-ring" />
       </div>
 
-      <div className="flex h-8 shrink-0 items-stretch gap-1 bg-rail pt-1 pr-[calc(--spacing(1.5)+var(--safe-area-right))] pl-[calc(--spacing(1.5)+var(--safe-area-left))]">
+      <div className="flex h-8 shrink-0 items-stretch gap-1 window-gutters bg-rail pt-1 [--side-gutter:--spacing(1.5)]">
         <TerminalTabStrip
           groups={stripGroups}
           activeTerminalId={resolvedActiveTerminalId}
diff --git a/apps/web/src/components/chat/ExpandedImageDialog.tsx b/apps/web/src/components/chat/ExpandedImageDialog.tsx
index df125ff65..80dabe9a5 100644
--- a/apps/web/src/components/chat/ExpandedImageDialog.tsx
+++ b/apps/web/src/components/chat/ExpandedImageDialog.tsx
@@ -116,7 +116,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
     <div
       ref={dialogRef}
       tabIndex={-1}
-      className="fixed inset-0 z-50 flex touch-none items-center justify-center overflow-hidden bg-black/75 py-6 pr-[calc(1rem+var(--safe-area-right))] pl-[calc(1rem+var(--safe-area-left))] outline-none [-webkit-app-region:no-drag]"
+      className="fixed inset-0 z-50 flex touch-none items-center justify-center overflow-hidden bg-black/75 window-gutters py-6 outline-none [--side-gutter:--spacing(4)] [-webkit-app-region:no-drag]"
       role="dialog"
       aria-modal="true"
       aria-label="Expanded image preview"
diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx
index d50bb10a5..c7da1678b 100644
--- a/apps/web/src/components/ui/alert-dialog.tsx
+++ b/apps/web/src/components/ui/alert-dialog.tsx
@@ -79,7 +79,7 @@ function AlertDialogViewport({
   return (
     <AlertDialogPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center bg-white/48 p-4 pt-[calc(1rem+var(--keyboard-inset-top))] pb-[calc(1rem+var(--keyboard-inset-bottom))] backdrop-blur-[2px] dark:bg-black/28",
+        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center bg-white/48 pt-[calc(1rem+var(--keyboard-inset-top))] pb-[calc(1rem+var(--keyboard-inset-bottom))] backdrop-blur-[2px] dark:bg-black/28",
         VIEWPORT_SIDE_STRIPS_CLASS_NAME,
         className,
       )}
@@ -151,9 +151,9 @@ function AlertDialogFooter({
   return (
     <div
       className={cn(
-        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-4xl)-1px)]",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-4xl)-1px)]",
         variant === "default" && "border-t bg-muted/72 py-4",
-        variant === "default" && SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME,
+        variant === "default" ? SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME : "px-6",
         variant === "bare" && "pb-6",
         className,
       )}
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 328f883b9..306a93992 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -52,7 +52,7 @@ function CommandDialogViewport({
   return (
     <CommandDialogPrimitive.Viewport
       className={cn(
-        "pointer-events-none fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]",
+        "pointer-events-none fixed inset-0 z-50 flex flex-col items-center py-[max(--spacing(4),4vh)] sm:py-[10vh]",
         VIEWPORT_SIDE_STRIPS_CLASS_NAME,
         className,
       )}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index bdd8042ec..b3d13273f 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -55,7 +55,7 @@ function DialogViewport({ className, ...props }: Omit<DialogPrimitive.Viewport.P
   return (
     <DialogPrimitive.Viewport
       className={cn(
-        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center bg-white/48 p-4 pt-[calc(1rem+var(--keyboard-inset-top))] pb-[calc(1rem+var(--keyboard-inset-bottom))] backdrop-blur-[2px] dark:bg-black/28",
+        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center bg-white/48 pt-[calc(1rem+var(--keyboard-inset-top))] pb-[calc(1rem+var(--keyboard-inset-bottom))] backdrop-blur-[2px] dark:bg-black/28",
         VIEWPORT_SIDE_STRIPS_CLASS_NAME,
         className,
       )}
@@ -135,9 +135,9 @@ function DialogFooter({
   return (
     <div
       className={cn(
-        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-4xl)-1px)]",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-4xl)-1px)]",
         variant === "default" && "border-t bg-muted/72 py-4",
-        variant === "default" && SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME,
+        variant === "default" ? SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME : "px-6",
         variant === "bare" &&
           "in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6",
         className,
diff --git a/apps/web/src/components/ui/toast.tsx b/apps/web/src/components/ui/toast.tsx
index 19b45b103..5ec7c1c75 100644
--- a/apps/web/src/components/ui/toast.tsx
+++ b/apps/web/src/components/ui/toast.tsx
@@ -797,7 +797,7 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
           // A dimmed backdrop is the exception: the user is in a dialog, and
           // a notice raised then must not sit blurred underneath it.
           raisedAboveBackdrops ? "z-60" : "z-40",
-          "fixed mx-auto flex w-[calc(100%-var(--toast-inset)*2-var(--safe-area-left)-var(--safe-area-right))] max-w-[20rem] [--toast-header-offset:52px] [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(6)]",
+          "fixed mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-[20rem] [--toast-header-offset:52px] [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(6)]",
           // Vertical positioning
           "data-[position*=top]:top-[calc(var(--toast-inset)+var(--toast-header-offset))]",
           "data-[position*=bottom]:bottom-(--toast-inset)",
@@ -805,13 +805,12 @@ function Toasts({ position = "top-right" }: { position: ToastPosition }) {
           // right panel rather than on top of it: the panel publishes its width
           // (mainAreaLayout.ts, carried here as `--right-panel-inset`, 0px when
           // closed) because this viewport is fixed to the window and the
-          // layout cannot push it aside. They also stay off the strips a
-          // screen keeps down its sides (--safe-area-left and
-          // --safe-area-right in index.css); an open panel that covers the
-          // right strip already accounts for it.
-          "data-[position*=left]:left-[calc(var(--toast-inset)+var(--safe-area-left))]",
+          // layout cannot push it aside. They also stay off a strip the
+          // screen keeps down that side (--safe-area-right in index.css);
+          // an open panel that covers the strip already accounts for it.
+          "data-[position*=left]:left-(--toast-inset)",
           "data-[position*=right]:right-[calc(var(--toast-inset)+max(var(--right-panel-inset,0px),var(--safe-area-right)))]",
-          "data-[position*=center]:-translate-x-1/2 data-[position*=center]:left-[calc(50%+(var(--safe-area-left)-var(--safe-area-right))/2)]",
+          "data-[position*=center]:-translate-x-1/2 data-[position*=center]:left-1/2",
         )}
         data-position={position}
         data-slot="toast-viewport"
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 6225bb730..a6e89e849 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -288,6 +288,21 @@ html.electron.mac:not([data-marketing-capture]) {
   padding-right: calc(var(--side-gutter) + var(--safe-area-right));
   padding-left: calc(var(--side-gutter) + var(--safe-area-left));
 }
+/* A phone's bottom sheet and a filled footer inside it (sideStrips.ts): the
+   sheet pads its content out of the strips and says how far, and the footer
+   carries its fill back to the sheet's edges, keeping its 1.5rem gutter. */
+@utility sheet-strips {
+  --sheet-strip-left: var(--safe-area-left);
+  --sheet-strip-right: var(--safe-area-right);
+  padding-right: var(--safe-area-right);
+  padding-left: var(--safe-area-left);
+}
+@utility sheet-footer-strips {
+  margin-right: calc(var(--sheet-strip-right, 0px) * -1);
+  margin-left: calc(var(--sheet-strip-left, 0px) * -1);
+  padding-right: calc(1.5rem + var(--sheet-strip-right, 0px));
+  padding-left: calc(1.5rem + var(--sheet-strip-left, 0px));
+}
 @utility page-gutters {
   padding-right: calc(var(--side-gutter) + var(--safe-area-right));
   padding-left: var(--side-gutter);
diff --git a/apps/web/src/sideStrips.ts b/apps/web/src/sideStrips.ts
index 13595ad80..2b4febe93 100644
--- a/apps/web/src/sideStrips.ts
+++ b/apps/web/src/sideStrips.ts
@@ -33,7 +33,6 @@ function watchSideStrips(): void {
   if (typeof document === "undefined" || typeof ResizeObserver === "undefined") return;
   const probe = document.createElement("div");
   probe.setAttribute("aria-hidden", "true");
-  probe.dataset.sideStripsProbe = "";
   probe.style.cssText =
     "position:fixed;top:0;left:0;visibility:hidden;pointer-events:none;width:var(--safe-area-right,0px);height:var(--safe-area-left,0px)";
   new ResizeObserver(() => {
@@ -83,11 +82,11 @@ export function useCollisionPadding(padding?: CollisionPadding): CollisionPaddin
 }
 
 /**
- * A centered layer's viewport: the layer stays a rem off each strip. Add it
- * after the viewport's own `p-4`.
+ * A centered layer's viewport: the layer stays a rem off each strip and each
+ * edge of the window (`window-gutters` in index.css). It is the viewport's
+ * side padding, in place of a `px-4`.
  */
-export const VIEWPORT_SIDE_STRIPS_CLASS_NAME =
-  "pr-[calc(1rem+var(--safe-area-right))] pl-[calc(1rem+var(--safe-area-left))]";
+export const VIEWPORT_SIDE_STRIPS_CLASS_NAME = "window-gutters [--side-gutter:--spacing(4)]";
 
 /**
  * A phone's bottom sheet (a dialog below `sm`): it is as wide as the window,
@@ -96,12 +95,11 @@ export const VIEWPORT_SIDE_STRIPS_CLASS_NAME =
  * parts that reach its edges themselves: a footer's fill
  * (SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME) and the close button.
  */
-export const BOTTOM_SHEET_SIDE_STRIPS_CLASS_NAME =
-  "max-sm:[--sheet-strip-left:var(--safe-area-left)] max-sm:[--sheet-strip-right:var(--safe-area-right)] max-sm:pr-(--sheet-strip-right) max-sm:pl-(--sheet-strip-left)";
+export const BOTTOM_SHEET_SIDE_STRIPS_CLASS_NAME = "max-sm:sheet-strips";
 
 /**
  * A filled footer inside such a sheet: the fill reaches the sheet's edges,
- * the buttons stay out of the strips. Goes after the footer's `px-6`.
+ * the buttons stay out of the strips. It is the footer's side padding, in
+ * place of its `px-6`.
  */
-export const SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME =
-  "-mr-(--sheet-strip-right,0px) -ml-(--sheet-strip-left,0px) pr-[calc(--spacing(6)+var(--sheet-strip-right,0px))] pl-[calc(--spacing(6)+var(--sheet-strip-left,0px))]";
+export const SHEET_FOOTER_SIDE_STRIPS_CLASS_NAME = "sheet-footer-strips";