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..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-1.5 pl-1.5">
+      <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/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..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 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 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"
@@ -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..c7da1678b 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
@@ -74,7 +79,8 @@ 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,
       )}
       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"
@@ -144,8 +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 : "px-6",
         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..306a93992 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
@@ -51,7 +52,8 @@ 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,
       )}
       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..b3d13273f 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);
@@ -49,7 +55,8 @@ 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,
       )}
       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 />
@@ -127,8 +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 : "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/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..5ec7c1c75 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 {
@@ -804,9 +805,11 @@ 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.
+          // 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)+var(--right-panel-inset,0px))]",
+          "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-1/2",
         )}
         data-position={position}
@@ -967,6 +970,7 @@ function AnchoredToastProvider({ children, ...props }: Toast.Provider.Props) {
 }
 
 function AnchoredToasts() {
+  const collisionPadding = useCollisionPadding();
   const { toasts } = Toast.useToastManager<ThreadToastData>();
   const activeThreadRef = useActiveThreadRefFromRoute();
 
@@ -988,6 +992,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..a6e89e849 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,68 @@ 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));
+}
+/* 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);
+  @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..2b4febe93
--- /dev/null
+++ b/apps/web/src/sideStrips.ts
@@ -0,0 +1,105 @@
+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.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 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 = "window-gutters [--side-gutter:--spacing(4)]";
+
+/**
+ * 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-strips";
+
+/**
+ * A filled footer inside such a sheet: the fill reaches the sheet's edges,
+ * 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 = "sheet-footer-strips";
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