@charcuterie/ui 4.2.0 → 4.2.1

package/dist/Main/Main.d.ts

@@ -80,6 +80,39 @@ export type MainProps = ComponentPropsWithRef<"main"> & {
  *    an app's own fixed chrome belongs in `Shell`, beside `Main`
  *    rather than in it.
  *
+ * ## `relative` — the scrollport has to be the containing block
+ *
+ * `<main>` is the page's only vertical scrollport, so everything
+ * in it is supposed to scroll *inside* it. An absolutely
+ * positioned descendant does not, unless this element is its
+ * containing block: with `position: static` here, the nearest
+ * positioned ancestor is `Shell`, which is **outside** the
+ * scrollport. The box then resolves against `Shell`, `<main>`'s
+ * `overflow-y` has no authority over it, and its static position —
+ * a couple of thousand pixels down a long document — becomes
+ * scrollable overflow on `documentElement`. The page grows to
+ * reach it and the reader gets a **second scrollbar** beside the
+ * one `<main>` already has.
+ *
+ * The box does not have to be exotic. Tailwind's `sr-only` is
+ * `position: absolute`, so the visually hidden
+ * `<span>(opens in a new tab)</span>` on one link in a document
+ * footer is enough. Measured on Folio at 1440x900: `<main>` was
+ * 835px tall and `document.documentElement.scrollHeight` read
+ * 2085, which is exactly where that span sat.
+ *
+ * `overflow-x: hidden` comes with it and is not decoration.
+ * `relative` moves every absolutely positioned descendant's
+ * containing block from `Shell` to here, which also moves what
+ * clips them **sideways**: `Shell`'s `overflow-x: clip` no longer
+ * reaches them, so a drawer parked at `translateX(110%)` inside
+ * `Main` would draw a horizontal scrollbar on the scrollport
+ * instead of being clipped. `hidden` rather than `clip` because
+ * this element already scrolls on the other axis — a `clip` beside
+ * an `auto` computes to `hidden` anyway, and writing what the
+ * browser will use is the honest spelling. `Shell`'s note on the
+ * clip explains the other half.
+ *
  * ## It remembers where each history entry was scrolled to
  *
  * `Shell` gives this element the page's only vertical scrollport,

package/dist/Main/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAEd,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,0BAA0B,CAAA;AAMjC,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACtD,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,eAAO,MAAM,IAAI,GAAI,8DAOlB,SAAS,KAAG,SA0Dd,CAAA"}
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAEd,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,0BAA0B,CAAA;AAMjC,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACtD,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2KG;AACH,eAAO,MAAM,IAAI,GAAI,8DAOlB,SAAS,KAAG,SA0Dd,CAAA"}

package/dist/Main/Main.js

@@ -83,6 +83,39 @@ import { useScrollMemory } from "./useScrollMemory.js";
  *    an app's own fixed chrome belongs in `Shell`, beside `Main`
  *    rather than in it.
  *
+ * ## `relative` — the scrollport has to be the containing block
+ *
+ * `<main>` is the page's only vertical scrollport, so everything
+ * in it is supposed to scroll *inside* it. An absolutely
+ * positioned descendant does not, unless this element is its
+ * containing block: with `position: static` here, the nearest
+ * positioned ancestor is `Shell`, which is **outside** the
+ * scrollport. The box then resolves against `Shell`, `<main>`'s
+ * `overflow-y` has no authority over it, and its static position —
+ * a couple of thousand pixels down a long document — becomes
+ * scrollable overflow on `documentElement`. The page grows to
+ * reach it and the reader gets a **second scrollbar** beside the
+ * one `<main>` already has.
+ *
+ * The box does not have to be exotic. Tailwind's `sr-only` is
+ * `position: absolute`, so the visually hidden
+ * `<span>(opens in a new tab)</span>` on one link in a document
+ * footer is enough. Measured on Folio at 1440x900: `<main>` was
+ * 835px tall and `document.documentElement.scrollHeight` read
+ * 2085, which is exactly where that span sat.
+ *
+ * `overflow-x: hidden` comes with it and is not decoration.
+ * `relative` moves every absolutely positioned descendant's
+ * containing block from `Shell` to here, which also moves what
+ * clips them **sideways**: `Shell`'s `overflow-x: clip` no longer
+ * reaches them, so a drawer parked at `translateX(110%)` inside
+ * `Main` would draw a horizontal scrollbar on the scrollport
+ * instead of being clipped. `hidden` rather than `clip` because
+ * this element already scrolls on the other axis — a `clip` beside
+ * an `auto` computes to `hidden` anyway, and writing what the
+ * browser will use is the honest spelling. `Shell`'s note on the
+ * clip explains the other half.
+ *
  * ## It remembers where each history entry was scrolled to
  *
  * `Shell` gives this element the page's only vertical scrollport,
@@ -155,7 +188,7 @@ export const Main = ({ children, className, contentWidth, id, ref, ...mainProps
     const maxInlineSize = toMaxInlineSize(contentWidth ??
         shell?.contentWidth ??
         DEFAULT_CONTENT_WIDTH);
-    return (_jsx("main", { ...mainProps, className: toClassName("charcuterie-scrollbar col-start-1 row-start-3 min-h-0 min-w-0 overflow-y-auto md:col-start-2 md:row-start-2", className), id: id ?? shell?.mainId ?? fallbackId, 
+    return (_jsx("main", { ...mainProps, className: toClassName("charcuterie-scrollbar relative col-start-1 row-start-3 min-h-0 min-w-0 overflow-x-hidden overflow-y-auto md:col-start-2 md:row-start-2", className), id: id ?? shell?.mainId ?? fallbackId, 
         // A caller's `ref` is a subscription, not a value, so the
         // scroll memory composes with it rather than replacing it.
         //

package/dist/Main/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,SAAS,EACT,WAAW,GACZ,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAIL,UAAU,GACX,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,qBAAqB,EACrB,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAMtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0IG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,EAAE,EACF,GAAG,EACH,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACtC,MAAM,WAAW,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAA;IACnD,MAAM,aAAa,GAAG,eAAe,CAAC,WAAW,CAAC,CAAA;IAElD,iEAAiE;IACjE,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,EAAE,CAAA;IAEhC,MAAM,aAAa,GAAG,eAAe,CACnC,YAAY;QACV,KAAK,EAAE,YAAY;QACnB,qBAAqB,CACxB,CAAA;IAED,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,6GAA6G,EAC7G,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,MAAM,IAAI,UAAU;QACrC,0DAA0D;QAC1D,2DAA2D;QAC3D,EAAE;QACF,yDAAyD;QACzD,8DAA8D;QAC9D,qBAAqB;QACrB,GAAG,EACD,GAAG;YACD,CAAC,CAAE,SAAS,CACR,GAAmB,EACnB,aAAa,CACe;YAChC,CAAC,CAAC,aAAa,EAEnB,QAAQ,EAAE,CAAC,CAAC,YAaZ,cACE,SAAS,EAAC,uFAAuF,EACjG,KAAK,EAAE,EAAE,aAAa,EAAE,YAEvB,QAAQ,GACL,GACD,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/Main/Main.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,SAAS,EACT,WAAW,GACZ,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAIL,UAAU,GACX,MAAM,OAAO,CAAA;AAEd,OAAO,EAEL,qBAAqB,EACrB,eAAe,GAChB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAMtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2KG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,EAAE,EACF,GAAG,EACH,GAAG,SAAS,EACF,EAAa,EAAE;IACzB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACtC,MAAM,WAAW,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAA;IACnD,MAAM,aAAa,GAAG,eAAe,CAAC,WAAW,CAAC,CAAA;IAElD,iEAAiE;IACjE,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,EAAE,CAAA;IAEhC,MAAM,aAAa,GAAG,eAAe,CACnC,YAAY;QACV,KAAK,EAAE,YAAY;QACnB,qBAAqB,CACxB,CAAA;IAED,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,wIAAwI,EACxI,SAAS,CACV,EACD,EAAE,EAAE,EAAE,IAAI,KAAK,EAAE,MAAM,IAAI,UAAU;QACrC,0DAA0D;QAC1D,2DAA2D;QAC3D,EAAE;QACF,yDAAyD;QACzD,8DAA8D;QAC9D,qBAAqB;QACrB,GAAG,EACD,GAAG;YACD,CAAC,CAAE,SAAS,CACR,GAAmB,EACnB,aAAa,CACe;YAChC,CAAC,CAAC,aAAa,EAEnB,QAAQ,EAAE,CAAC,CAAC,YAaZ,cACE,SAAS,EAAC,uFAAuF,EACjG,KAAK,EAAE,EAAE,aAAa,EAAE,YAEvB,QAAQ,GACL,GACD,CACR,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/Main/Main.mdx

@@ -109,7 +109,9 @@ for a `getBoundingClientRect()` assertion to catch. That is why the gate asserts
 `document.documentElement.scrollWidth`, and why `Main.test.tsx` pins the computed value.
 
 That is the cheap half of the horizontal-scroll fix; the other halves are `minmax(0, 1fr)`
-and `overflow-x: clip` on `Shell`.
+and `overflow-x: clip` on `Shell`, plus `overflow-x: hidden` here for anything absolutely
+positioned **inside** the scrollport — the next section says why that one cannot be left to
+the frame.
 
 A `<table>` is the one thing neither can save. Table columns have min-content widths that no
 `overflow-wrap` reaches, so a wide table goes in a scroll container:
@@ -140,6 +142,33 @@ satisfy it and the choice is not a matter of taste:
 `aria-label` on the container is worth it either way: it turns the scroller into a named
 region, so the table is announced as a thing rather than as loose content.
 
+## `relative`, and the second scrollbar
+
+`<main>` is the page's only vertical scrollport, so the document itself must never scroll.
+An absolutely positioned descendant breaks that unless `<main>` is its **containing block**.
+With `position: static` the nearest positioned ancestor is `Shell`, which sits *outside* the
+scrollport: the box resolves against the frame, `<main>`'s `overflow-y` has no authority over
+it, and its static position — a couple of thousand pixels down a long document — lands as
+scrollable overflow on `documentElement`. The page grows to reach it, and the reader gets a
+**second scrollbar** beside the one `<main>` already has.
+
+The box does not have to be exotic, which is what makes this hard to spot. Tailwind's
+`sr-only` is `position: absolute`, so one visually hidden `(opens in a new tab)` span in a
+document footer is enough. Measured on Folio at 1440x900 before this: `<main>` 835px tall,
+`document.documentElement.scrollHeight` 2085 — the span's offset, exactly. Nothing on the
+page looked wrong; there were simply two scrollbars.
+
+`overflow-x: hidden` comes with the `relative` and is not decoration. Moving every
+absolutely positioned descendant's containing block from `Shell` to `<main>` also moves what
+clips them sideways, so `Shell`'s `overflow-x: clip` no longer reaches them — a drawer parked
+at `translateX(110%)` **inside** `Main` would draw a horizontal scrollbar on the scrollport
+instead of being clipped. `hidden` rather than `clip` because this element already scrolls on
+the other axis: `clip` beside an `auto` computes to `hidden` anyway, so writing `hidden` is
+writing what the browser will use.
+
+An app's own parked chrome still belongs in `Shell`, beside `Main` rather than in it. That is
+what `Shell`'s clip is for, and it is the arrangement `Shell.stories.tsx` demonstrates.
+
 ## `tabIndex={-1}`
 
 <Canvas of={MainStories.Interactive} />

package/src/Main/Main.stories.tsx

@@ -10,10 +10,13 @@ import { toMaxInlineSize } from "../Shell/contentWidth.ts"
 import { Shell } from "../Shell/Shell.tsx"
 import { Spinner } from "../Spinner/Spinner.tsx"
 import {
+  ExternalLinkFooter,
   HeaderSchemeToggle,
   OverflowingContent,
   PageContent,
+  ParkedDrawer,
   RailNavigation,
+  ScrollFiller,
 } from "../shell.storyHelpers.tsx"
 import { Main } from "./Main.tsx"
 import { ScrollMemoryProvider } from "./ScrollMemoryProvider.tsx"
@@ -124,14 +127,29 @@ export const AllVariants: Story = {
 }
 
 /**
- * The 390px fixture. An unbroken 130-character path and a table
- * wider than the phone it is on, in one column.
+ * The 390px fixture: everything that tries to make the **page**
+ * scroll when only `<main>` should, in one column.
  *
- * The path wraps because `Main` sets `overflow-wrap: break-word`;
- * the table cannot wrap at all and lives in a labelled,
- * keyboard-reachable scroll container. Neither widens the page,
- * which is the assertion `Main.test.tsx` makes at a real 390px
- * viewport.
+ * Sideways, three ways. The path wraps because `Main` sets
+ * `overflow-wrap: anywhere`; the table cannot wrap at all and
+ * lives in a labelled, keyboard-reachable scroll container; and
+ * the drawer parked at `translateX(110%)` is clipped. The drawer
+ * is **inside** `Main` here, unlike `Shell.stories.tsx`, so the
+ * element clipping it is `Main` — `position: relative` moved that
+ * job in from the frame, and `overflow-x: hidden` is `Main`
+ * taking it.
+ *
+ * Downwards, once, and it is the shape nobody looks for: the
+ * footer link's `sr-only` "(opens in a new tab)" span is
+ * `position: absolute`, so it resolves against the nearest
+ * positioned ancestor. Before `Main` was one that was `Shell`,
+ * outside the scrollport, and the span's static position past the
+ * fold became scrollable overflow on the page. `ScrollFiller` is
+ * what puts it past the fold; without the height there is nothing
+ * to escape.
+ *
+ * The assertions are in `Main.test.tsx` at a real 390px viewport
+ * — a story is a demo.
  */
 export const Responsive: Story = {
   render: (mainProps) => (
@@ -139,7 +157,21 @@ export const Responsive: Story = {
       <Header heading="Transfers" />
 
       <Main {...mainProps}>
+        <ParkedDrawer />
+
         <OverflowingContent />
+
+        {/*
+          Twice. One is a few dozen pixels short of filling an
+          844px phone, and the footer below has to sit past the
+          fold or there is nothing for its hidden span to escape
+          to.
+        */}
+        <ScrollFiller />
+
+        <ScrollFiller />
+
+        <ExternalLinkFooter />
       </Main>
     </Shell>
   ),

package/src/Main/Main.test.tsx

@@ -89,7 +89,7 @@ test("main is the query container its content responds to", async () => {
   ).toHaveLength(2)
 })
 
-test("neither an unbroken path nor a wide table widens the page at 390px", async () => {
+test("nothing in the fixture widens the page at 390px", async () => {
   await setViewport(PHONE)
 
   const { canvas, canvasElement } =
@@ -131,6 +131,30 @@ test("neither an unbroken path nor a wide table widens the page at 390px", async
     scroller.clientWidth,
   )
 
+  // The drawer parked at `translateX(110%)`, which is inside
+  // `Main` in this story rather than beside it. `Shell`'s
+  // `overflow-x: clip` cannot reach it any more — `Main` is
+  // `position: relative`, so `Main` is its containing block and
+  // `Main`'s own `overflow-x` is the only thing between it and a
+  // horizontal scrollbar on the scrollport.
+  const parkedDrawer = canvasElement.querySelector(
+    "#parked-drawer",
+  ) as HTMLElement
+
+  const main = canvas.getByRole("main")
+
+  await expect(parkedDrawer.offsetParent).toBe(main)
+
+  // `hidden` rather than `clip`, and the browser decides that:
+  // `overflow-x: clip` beside an `overflow-y: auto` computes to
+  // `hidden`, so `Main` writes what will actually be used. It is
+  // also why the assertion is on the *page* below rather than on
+  // `main.scrollWidth` — a `hidden` box still reports the
+  // overflow it is refusing to scroll to.
+  await expect(
+    globalThis.getComputedStyle(main).overflowX,
+  ).toBe("hidden")
+
   const { documentElement } = document
 
   await expect(
@@ -140,6 +164,65 @@ test("neither an unbroken path nor a wide table widens the page at 390px", async
   await expectNoAxeViolations(canvasElement)
 })
 
+/**
+ * The second scrollbar, and how cheaply it is bought.
+ *
+ * `<main>` is the page's only vertical scrollport, so the document
+ * itself must not scroll. An absolutely positioned descendant
+ * breaks that unless `<main>` is its containing block: resolve it
+ * against `Shell` instead — which is what `position: static` here
+ * used to mean — and the box keeps its static position, deep down
+ * a long document, while sitting outside the scrollport. The page
+ * grows to reach it.
+ *
+ * The box in this fixture is Tailwind's `sr-only`, one pixel of
+ * nothing on an "opens in a new tab" hint. Measured on Folio
+ * before this: `<main>` 835px tall,
+ * `document.documentElement.scrollHeight` 2085 — the span's
+ * offset, exactly.
+ */
+test("a visually hidden span past the fold does not give the page a second scrollbar", async () => {
+  await setViewport(PHONE)
+
+  const { canvas, canvasElement } =
+    await mountStory(Responsive)
+
+  const main = canvas.getByRole("main")
+
+  // The fixture is only a fixture if `<main>` genuinely scrolls
+  // and the span genuinely sits past the fold. Without the
+  // height there is nothing for it to escape to, and every
+  // assertion below would pass against a short page.
+  await expect(main.scrollHeight).toBeGreaterThan(
+    main.clientHeight,
+  )
+
+  // By id rather than by text: the hint's words are part of the
+  // link's accessible name too, so a text query matches both the
+  // span and the anchor around it.
+  const hint = canvasElement.querySelector(
+    "#new-tab-hint",
+  ) as HTMLElement
+
+  await expect(
+    globalThis.getComputedStyle(hint).position,
+  ).toBe("absolute")
+
+  await expect(
+    hint.getBoundingClientRect().top,
+  ).toBeGreaterThan(main.getBoundingClientRect().bottom)
+
+  await expect(hint.offsetParent).toBe(main)
+
+  const { documentElement } = document
+
+  await expect(
+    documentElement.scrollHeight,
+  ).toBeLessThanOrEqual(documentElement.clientHeight)
+
+  await expectNoAxeViolations(canvasElement)
+})
+
 /**
  * `tabIndex={-1}` is the difference between a skip link that
  * works and one that only scrolls. It must not put `<main>` in

package/src/Main/Main.tsx

@@ -101,6 +101,39 @@ export type MainProps = ComponentPropsWithRef<"main"> & {
  *    an app's own fixed chrome belongs in `Shell`, beside `Main`
  *    rather than in it.
  *
+ * ## `relative` — the scrollport has to be the containing block
+ *
+ * `<main>` is the page's only vertical scrollport, so everything
+ * in it is supposed to scroll *inside* it. An absolutely
+ * positioned descendant does not, unless this element is its
+ * containing block: with `position: static` here, the nearest
+ * positioned ancestor is `Shell`, which is **outside** the
+ * scrollport. The box then resolves against `Shell`, `<main>`'s
+ * `overflow-y` has no authority over it, and its static position —
+ * a couple of thousand pixels down a long document — becomes
+ * scrollable overflow on `documentElement`. The page grows to
+ * reach it and the reader gets a **second scrollbar** beside the
+ * one `<main>` already has.
+ *
+ * The box does not have to be exotic. Tailwind's `sr-only` is
+ * `position: absolute`, so the visually hidden
+ * `<span>(opens in a new tab)</span>` on one link in a document
+ * footer is enough. Measured on Folio at 1440x900: `<main>` was
+ * 835px tall and `document.documentElement.scrollHeight` read
+ * 2085, which is exactly where that span sat.
+ *
+ * `overflow-x: hidden` comes with it and is not decoration.
+ * `relative` moves every absolutely positioned descendant's
+ * containing block from `Shell` to here, which also moves what
+ * clips them **sideways**: `Shell`'s `overflow-x: clip` no longer
+ * reaches them, so a drawer parked at `translateX(110%)` inside
+ * `Main` would draw a horizontal scrollbar on the scrollport
+ * instead of being clipped. `hidden` rather than `clip` because
+ * this element already scrolls on the other axis — a `clip` beside
+ * an `auto` computes to `hidden` anyway, and writing what the
+ * browser will use is the honest spelling. `Shell`'s note on the
+ * clip explains the other half.
+ *
  * ## It remembers where each history entry was scrolled to
  *
  * `Shell` gives this element the page's only vertical scrollport,
@@ -189,7 +222,7 @@ export const Main = ({
     <main
       {...mainProps}
       className={toClassName(
-        "charcuterie-scrollbar col-start-1 row-start-3 min-h-0 min-w-0 overflow-y-auto md:col-start-2 md:row-start-2",
+        "charcuterie-scrollbar relative col-start-1 row-start-3 min-h-0 min-w-0 overflow-x-hidden overflow-y-auto md:col-start-2 md:row-start-2",
         className,
       )}
       id={id ?? shell?.mainId ?? fallbackId}

package/src/Shell/Shell.stories.tsx

@@ -8,6 +8,7 @@ import {
   HeaderSchemeToggle,
   OverflowingContent,
   PageContent,
+  ParkedDrawer,
   RailDetail,
   RailNavigation,
   ScrollFiller,
@@ -130,6 +131,14 @@ export const WithBothRails: Story = {
  * scrolls left and right today for the first reason; the second
  * is what an `overflow-wrap` alone cannot save.
  *
+ * The third shape is `ParkedDrawer`, and it sits **beside**
+ * `Main` rather than in it — an app's parked chrome is parked
+ * against the frame, which is the arrangement `Shell`'s
+ * `overflow-x: clip` exists for. Absolutely positioned children
+ * of a grid container take no track, so it costs the layout
+ * nothing. `Main.stories.tsx` renders the same drawer *inside*
+ * `Main`, where the clip that answers it is `Main`'s own.
+ *
  * `document.documentElement.scrollWidth <= clientWidth` at 390px
  * is the assertion, and it is in `Shell.test.tsx` rather than
  * here — a story is a demo.
@@ -150,6 +159,8 @@ export const Responsive: Story = {
         <OverflowingContent />
       </Main>
 
+      <ParkedDrawer />
+
       <Rail label="Job detail" side="end">
         <RailDetail />
       </Rail>

package/src/shell.storyHelpers.tsx

@@ -140,8 +140,73 @@ export const ScrollFiller = (): ReactNode => (
 )
 
 /**
- * The three things that actually make a page scroll sideways, and
- * each needs a different answer.
+ * A closed drawer parked off the inline edge by a transform — the
+ * third shape that makes a page scroll sideways, and the one that
+ * broke plex-channels.
+ *
+ * It is still laid out, still painted, and still part of the
+ * scrollable overflow region of whatever it resolves against: a
+ * transform does not remove a box from that region, and neither
+ * does `visibility: hidden`. So the page scrolls sideways to reach
+ * a panel nobody can see, and every `min-width: 0` in the tree is
+ * irrelevant. Only a clip on the box's containing block answers
+ * it.
+ *
+ * **Which element that is depends on where the drawer is
+ * rendered, and the two stories place it differently on purpose.**
+ * Beside `Main` it is `Shell`'s to clip, which is where an app's
+ * parked chrome belongs. Inside `Main` it is `Main`'s, because
+ * `Main` is `position: relative` — and that is why `Main` carries
+ * an `overflow-x: hidden` of its own rather than leaning on the
+ * frame's.
+ */
+export const ParkedDrawer = (): ReactNode => (
+  <div
+    aria-hidden="true"
+    className="pointer-events-none absolute top-0 end-0 h-40 w-80 translate-x-[110%] rounded-lg border border-border-subtle bg-surface-raised"
+    id="parked-drawer"
+  />
+)
+
+/**
+ * The shape that makes a page scroll **down** when only `<main>`
+ * was supposed to: an ordinary external link whose "opens in a new
+ * tab" hint is visually hidden.
+ *
+ * `sr-only` is `position: absolute`. Nothing here looks like
+ * layout at all — the span is one pixel and paints nothing — and
+ * that is the point: whatever it resolves against inherits its
+ * static position, which is wherever the link happens to sit in a
+ * long document. Resolve it outside the scrollport and the page
+ * grows to reach it, which is a second scrollbar beside `Main`'s.
+ * Folio drew both.
+ *
+ * It goes at the END of a fixture, past the fold, or the escape it
+ * demonstrates has nowhere to escape to.
+ */
+export const ExternalLinkFooter = (): ReactNode => (
+  <p className="text-content-secondary text-sm">
+    <a
+      className="text-intent-accent-content underline"
+      href="#runbook"
+      id="runbook-link"
+      rel="noreferrer"
+      target="_blank"
+    >
+      The transfer runbook
+      <span className="sr-only" id="new-tab-hint">
+        {" "}
+        (opens in a new tab)
+      </span>
+    </a>
+  </p>
+)
+
+/**
+ * The two shapes of *content* that make a page scroll sideways,
+ * and each needs a different answer. The third shape is a box
+ * rather than content and lives in `ParkedDrawer`, because where
+ * it is rendered is half of what it demonstrates.
  *
  * The **path** is content that *can* wrap and does not, because
  * nothing in it is a break opportunity. `Main`'s `wrap-anywhere`
@@ -166,23 +231,6 @@ export const ScrollFiller = (): ReactNode => (
  */
 export const OverflowingContent = (): ReactNode => (
   <>
-    {/*
-      The third shape, and the one that broke plex-channels: a
-      closed drawer parked off the inline edge by a transform.
-
-      It is still laid out, still painted, and still part of the
-      document's scrollable overflow region — a transform does not
-      remove a box from it, and neither does `visibility: hidden`.
-      So the page scrolls sideways to reach a panel nobody can see,
-      and every `min-width: 0` in the tree is irrelevant. `Shell`'s
-      `overflow-x: clip` is what actually answers it.
-    */}
-    <div
-      aria-hidden="true"
-      className="pointer-events-none absolute top-0 end-0 h-40 w-80 translate-x-[110%] rounded-lg border border-border-subtle bg-surface-raised"
-      id="parked-drawer"
-    />
-
     <p className="text-content-secondary text-sm">
       /mnt/Bunnies/Family/Media/Television/Some-Very-Long-Show-Name/Season-01/Some-Very-Long-Show-Name-S01E01-Pilot-2160p-HDR-DTS-HD-MA.mkv
     </p>