From ac5708399c82f359f8fa297448f2620705a2ab57 Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:18:32 -0500
Subject: [PATCH 01/15] test(support): extract narrow_frame_fits? from
 open_in_narrow_frame (#318)

Same measure (scrollWidth against innerWidth), now callable after a page in the
frame changes, so the next commit's example can overflow it by a few pixels.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/support/narrow_frame.rb     |  8 +++++++-
 spec/system/narrow_frame_spec.rb | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 spec/system/narrow_frame_spec.rb

diff --git a/spec/support/narrow_frame.rb b/spec/support/narrow_frame.rb
index ccbc6acd..dcf21a20 100644
--- a/spec/support/narrow_frame.rb
+++ b/spec/support/narrow_frame.rb
@@ -13,9 +13,15 @@ def open_in_narrow_frame(path, width:, ready:, height: 800)
       document.body.append(frame)
     JS
     within_narrow_frame { find(ready) }
+    [ page.evaluate_script("document.getElementById('narrow').contentWindow.innerWidth"), narrow_frame_fits? ]
+  end
+
+  # Whether the page in the narrow frame fits without horizontal scrolling, measured now.
+  # Call it from the top page, outside within_narrow_frame (it reaches the frame through #narrow).
+  def narrow_frame_fits?
     page.evaluate_script(<<~JS)
       (() => { const view = document.getElementById("narrow").contentWindow
-        return [ view.innerWidth, view.document.documentElement.scrollWidth <= view.innerWidth ] })()
+        return view.document.documentElement.scrollWidth <= view.innerWidth })()
     JS
   end
 
diff --git a/spec/system/narrow_frame_spec.rb b/spec/system/narrow_frame_spec.rb
new file mode 100644
index 00000000..c6cb0be1
--- /dev/null
+++ b/spec/system/narrow_frame_spec.rb
@@ -0,0 +1,16 @@
+require "rails_helper"
+
+# The narrow-frame helper (spec/support/narrow_frame.rb) is what every phone-width example trusts to say a page doesn't
+# scroll sideways (#318), so it is checked against a page it can make overflow.
+RSpec.describe "The narrow-frame helper", type: :system do
+  # A short frame, so the sign-in page is taller than it and the frame draws its (classic, 15px in system specs) vertical scrollbar.
+  def open_sign_in_frame
+    visit new_session_path
+    open_in_narrow_frame(new_session_path, width: 360, height: 320, ready: "main")
+  end
+
+  it "reports a page that fits as fitting", :aggregate_failures do
+    expect(open_sign_in_frame).to eq([ 360, true ])
+    expect(narrow_frame_fits?).to be(true)
+  end
+end

From 8d0da39f1ef37850ef80b9e4083584f498df4734 Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:19:04 -0500
Subject: [PATCH 02/15] test(support): narrow-frame helper compares with
 clientWidth, not innerWidth (#318)

innerWidth includes the frame's classic 15px scrollbar, so a page scrolling
sideways by up to that much passed whenever the frame scrolled vertically.
The new example overflows the sign-in page by 5px under a vertical scrollbar:
red on the old comparison (expected false, got true), green now.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/support/narrow_frame.rb     | 10 +++++++---
 spec/system/narrow_frame_spec.rb | 24 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/spec/support/narrow_frame.rb b/spec/support/narrow_frame.rb
index dcf21a20..22261ee8 100644
--- a/spec/support/narrow_frame.rb
+++ b/spec/support/narrow_frame.rb
@@ -2,7 +2,7 @@
 # the page in a fixed-width same-origin iframe (id "narrow") on top of the current page.
 module NarrowFrame
   # Loads path in a width × height frame, waits for the ready selector inside it and returns
-  # [the frame's innerWidth, whether its page fits without horizontal scrolling].
+  # [the frame's innerWidth, whether its page fits without horizontal scrolling (see narrow_frame_fits?)].
   def open_in_narrow_frame(path, width:, ready:, height: 800)
     page.execute_script(<<~JS, path, width, height)
       document.getElementById("narrow")?.remove()
@@ -18,10 +18,14 @@ def open_in_narrow_frame(path, width:, ready:, height: 800)
 
   # Whether the page in the narrow frame fits without horizontal scrolling, measured now.
   # Call it from the top page, outside within_narrow_frame (it reaches the frame through #narrow).
+  #
+  # The page's scrollWidth is compared with the documentElement's clientWidth, the width the layout has, and not with
+  # innerWidth: innerWidth includes a vertical scrollbar (classic, 15px, in system specs, #271), which the frame draws
+  # whenever its page is taller than it, so a page scrolling sideways by up to that much would pass (#318).
   def narrow_frame_fits?
     page.evaluate_script(<<~JS)
-      (() => { const view = document.getElementById("narrow").contentWindow
-        return view.document.documentElement.scrollWidth <= view.innerWidth })()
+      (() => { const doc = document.getElementById("narrow").contentWindow.document.documentElement
+        return doc.scrollWidth <= doc.clientWidth })()
     JS
   end
 
diff --git a/spec/system/narrow_frame_spec.rb b/spec/system/narrow_frame_spec.rb
index c6cb0be1..00259ac4 100644
--- a/spec/system/narrow_frame_spec.rb
+++ b/spec/system/narrow_frame_spec.rb
@@ -9,8 +9,32 @@ def open_sign_in_frame
     open_in_narrow_frame(new_session_path, width: 360, height: 320, ready: "main")
   end
 
+  # Makes the frame's page scroll sideways by overflow px (a one-pixel-high box at the left edge, wider than the viewport) and
+  # returns what the frame measured, so an example can't pass while its overflow or its scrollbar is not really there.
+  def overflow_frame_page(overflow)
+    within_narrow_frame do
+      page.evaluate_script(<<~JS, overflow)
+        (() => { const doc = document.documentElement
+          const box = document.createElement("div")
+          box.style.cssText = `position:absolute;left:0;top:0;height:1px;width:${doc.clientWidth + arguments[0]}px`
+          document.body.append(box)
+          return { scrollbar: window.innerWidth - doc.clientWidth, overflow: doc.scrollWidth - doc.clientWidth } })()
+      JS
+    end
+  end
+
   it "reports a page that fits as fitting", :aggregate_failures do
     expect(open_sign_in_frame).to eq([ 360, true ])
     expect(narrow_frame_fits?).to be(true)
   end
+
+  # The trap of #318: the old comparison was against innerWidth, which includes the scrollbar, so a page scrolling sideways
+  # by less than the scrollbar's width passed whenever the frame scrolled vertically.
+  it "reports a page that scrolls sideways by less than a scrollbar's width", :aggregate_failures do
+    open_sign_in_frame
+    measured = overflow_frame_page(5)
+    expect(measured["scrollbar"]).to be > 5
+    expect(measured["overflow"]).to eq(5)
+    expect(narrow_frame_fits?).to be(false)
+  end
 end

From 4740f4843676117f3ca1bcee01c967aa0ce49ee7 Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:24:15 -0500
Subject: [PATCH 03/15] docs(support): document the narrow-frame helper's
 params, platform scrollbar widths, sign-up page (#318)

Review fixes: YARD tags on open_in_narrow_frame and narrow_frame_fits?, the
scrollbar is about 12 to 15px by platform, the example opens the sign-up page
(first run redirects the sign-in page), and the memory note no longer lists the
trap as open.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .claude/memory/headless-firefox-narrow-frame.md |  4 ++--
 spec/support/narrow_frame.rb                    | 13 +++++++++++--
 spec/system/narrow_frame_spec.rb                | 13 +++++++------
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/.claude/memory/headless-firefox-narrow-frame.md b/.claude/memory/headless-firefox-narrow-frame.md
index 6b65c69b..9488702e 100644
--- a/.claude/memory/headless-firefox-narrow-frame.md
+++ b/.claude/memory/headless-firefox-narrow-frame.md
@@ -7,7 +7,7 @@ metadata:
 
 Headless Firefox (Selenium, system specs and screenshot scripts) clamps the window to at least 500px wide. A `driven_by … screen_size: [390, 844]` driver actually renders at 500px, so phone-width assertions silently test the wrong layout.
 
-- **Specs:** use `spec/support/narrow_frame.rb` (`open_in_narrow_frame(path, width:, height:, ready:)` returns `[innerWidth, no_horizontal_overflow]`, and `within_narrow_frame { … }`) with the normal driver. Media queries and container queries evaluate against the iframe's own width. Prove each narrow assertion by breaking the CSS once. Touch-target and coarse-pointer rules still can't be tested this way. The window must be taller than the frame: links below the window's bottom edge can't be clicked, and the click silently does nothing (seed 12061, 2026-10-31).
+- **Specs:** use `spec/support/narrow_frame.rb` (`open_in_narrow_frame(path, width:, height:, ready:)` returns `[innerWidth, no_horizontal_overflow]`, where "no overflow" compares `scrollWidth` with `clientWidth` since #318, and `narrow_frame_fits?` re-measures from the top page after a change inside the frame; `within_narrow_frame { … }`) with the normal driver. Media queries and container queries evaluate against the iframe's own width. Prove each narrow assertion by breaking the CSS once. Touch-target and coarse-pointer rules still can't be tested this way. The window must be taller than the frame: links below the window's bottom edge can't be clicked, and the click silently does nothing (seed 12061, 2026-10-31).
 - **Screenshots:** inject a fixed-width iframe on a same-origin page, grow the frame to its content height, resize the window taller than the frame, then take an element screenshot of the frame. Without the taller window only the visible part is captured.
 - Separately named drivers (`options: { name: :firefox_dark }`) are still needed for different Firefox prefs, e.g. the dark theme, because Capybara reuses sessions by driver name.
 
@@ -20,4 +20,4 @@ Related: [[pr-screenshots-workflow]].
 - Measure related boxes in one script call. Two calls raced on the scanner page, which grows while the camera starts.
 - **Keyboard-only selects (spec 041, 2026-11-06):** under WebDriver in headless Firefox, arrow keys don't change a closed `<select>`'s value (its `selectedIndex` stays 0 whether or not the list opens). A keyboard-only example chooses by type-ahead instead: focus the select and `send_keys` the option's first letter.
 - **Scrollbars are pinned to classic (#271, 2026-11-10):** on a Mac, Firefox follows "Show scroll bars: Automatic" and draws overlay scrollbars (no width) when no mouse is connected, which made a 360px frame 15px wider than CI's and broke a wrap check locally only. `spec/support/system.rb` now sets `ui.useOverlayScrollbars = 0`. A driver registered under another name (the dark-theme ones) needs the same pref if it opens a narrow frame. See `docs/lessons/2026-11-10-a-local-only-failure-was-the-macs-scrollbar-setting.md`.
-- **A 360px frame is not a 360px phone (spec 069, 2026-11-11):** the frame keeps the forced classic scrollbar (15px on the Mac, about 12px on CI) and the body has an 8px margin, so a 360px frame's page container is 297px (360 − 15 − 16 body − 32 padding) and a deck-shape panel's interior 263px; a real 360px viewport gives a 312px container and a 278px interior. Model a phone as a **375px frame** (a 360px viewport). The `@container page` breakpoints (640px, 992px) are on the container (frame − 15 − 16 − page padding): a 640px frame is a 545px container and still shows the fold; the aside needs a frame of 735px or more. Write the chain in the spec; see `docs/lessons/2026-11-11-a-phone-width-criterion-needs-a-measured-chain.md` and #318 (the helper misses overflow a scrollbar hides). The pinned classic scrollbar is 15px on the Mac but about 12px on the Linux CI runner (spec 069's first CI run, interior 281px vs 278px): size a phone frame from the measured `innerWidth - documentElement.clientWidth`, `360 + scrollbar`, not 375.
+- **A 360px frame is not a 360px phone (spec 069, 2026-11-11):** the frame keeps the forced classic scrollbar (15px on the Mac, about 12px on CI) and the body has an 8px margin, so a 360px frame's page container is 297px (360 − 15 − 16 body − 32 padding) and a deck-shape panel's interior 263px; a real 360px viewport gives a 312px container and a 278px interior. Model a phone as a **375px frame** (a 360px viewport). The `@container page` breakpoints (640px, 992px) are on the container (frame − 15 − 16 − page padding): a 640px frame is a 545px container and still shows the fold; the aside needs a frame of 735px or more. Write the chain in the spec; see `docs/lessons/2026-11-11-a-phone-width-criterion-needs-a-measured-chain.md` and #318 (the helper used to miss overflow a scrollbar hides; it compares with `clientWidth` now). The pinned classic scrollbar is 15px on the Mac but about 12px on the Linux CI runner (spec 069's first CI run, interior 281px vs 278px): size a phone frame from the measured `innerWidth - documentElement.clientWidth`, `360 + scrollbar`, not 375.
diff --git a/spec/support/narrow_frame.rb b/spec/support/narrow_frame.rb
index 22261ee8..d034ff25 100644
--- a/spec/support/narrow_frame.rb
+++ b/spec/support/narrow_frame.rb
@@ -3,6 +3,12 @@
 module NarrowFrame
   # Loads path in a width × height frame, waits for the ready selector inside it and returns
   # [the frame's innerWidth, whether its page fits without horizontal scrolling (see narrow_frame_fits?)].
+  #
+  # @param path [String] the page to load, on the current origin
+  # @param width [Integer] the frame's width in px (its innerWidth, scrollbar included)
+  # @param ready [String] a CSS selector that must be present in the frame before it is measured
+  # @param height [Integer] the frame's height in px; shorter than the page, the frame draws a vertical scrollbar
+  # @return [Array(Integer, Boolean)] the frame's innerWidth and whether its page fits
   def open_in_narrow_frame(path, width:, ready:, height: 800)
     page.execute_script(<<~JS, path, width, height)
       document.getElementById("narrow")?.remove()
@@ -20,8 +26,11 @@ def open_in_narrow_frame(path, width:, ready:, height: 800)
   # Call it from the top page, outside within_narrow_frame (it reaches the frame through #narrow).
   #
   # The page's scrollWidth is compared with the documentElement's clientWidth, the width the layout has, and not with
-  # innerWidth: innerWidth includes a vertical scrollbar (classic, 15px, in system specs, #271), which the frame draws
-  # whenever its page is taller than it, so a page scrolling sideways by up to that much would pass (#318).
+  # innerWidth: innerWidth includes a vertical scrollbar (classic in system specs, #271, about 15px on a Mac and 12px on
+  # CI), which the frame draws whenever its page is taller than it, so a page scrolling sideways by up to that much would
+  # pass (#318).
+  #
+  # @return [Boolean]
   def narrow_frame_fits?
     page.evaluate_script(<<~JS)
       (() => { const doc = document.getElementById("narrow").contentWindow.document.documentElement
diff --git a/spec/system/narrow_frame_spec.rb b/spec/system/narrow_frame_spec.rb
index 00259ac4..2926413c 100644
--- a/spec/system/narrow_frame_spec.rb
+++ b/spec/system/narrow_frame_spec.rb
@@ -3,10 +3,11 @@
 # The narrow-frame helper (spec/support/narrow_frame.rb) is what every phone-width example trusts to say a page doesn't
 # scroll sideways (#318), so it is checked against a page it can make overflow.
 RSpec.describe "The narrow-frame helper", type: :system do
-  # A short frame, so the sign-in page is taller than it and the frame draws its (classic, 15px in system specs) vertical scrollbar.
-  def open_sign_in_frame
-    visit new_session_path
-    open_in_narrow_frame(new_session_path, width: 360, height: 320, ready: "main")
+  # A short frame, so the sign-up page (the first-run page, with no account yet) is taller than it and the frame draws its
+  # vertical scrollbar (classic in system specs, about 12 to 15px by platform).
+  def open_sign_up_frame
+    visit new_registration_path
+    open_in_narrow_frame(new_registration_path, width: 360, height: 320, ready: "main")
   end
 
   # Makes the frame's page scroll sideways by overflow px (a one-pixel-high box at the left edge, wider than the viewport) and
@@ -24,14 +25,14 @@ def overflow_frame_page(overflow)
   end
 
   it "reports a page that fits as fitting", :aggregate_failures do
-    expect(open_sign_in_frame).to eq([ 360, true ])
+    expect(open_sign_up_frame).to eq([ 360, true ])
     expect(narrow_frame_fits?).to be(true)
   end
 
   # The trap of #318: the old comparison was against innerWidth, which includes the scrollbar, so a page scrolling sideways
   # by less than the scrollbar's width passed whenever the frame scrolled vertically.
   it "reports a page that scrolls sideways by less than a scrollbar's width", :aggregate_failures do
-    open_sign_in_frame
+    open_sign_up_frame
     measured = overflow_frame_page(5)
     expect(measured["scrollbar"]).to be > 5
     expect(measured["overflow"]).to eq(5)

From 7770869d753c2f422d8d17afa45f8ee022b82c3e Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:29:24 -0500
Subject: [PATCH 04/15] test(support): page_fits_sideways?, the one measure of
 sideways overflow (#318)

For the checks that run inside within_narrow_frame or on the top page. The
example was red (undefined method) before it; narrow_frame_fits? now enters
the frame and calls it, so the clientWidth comparison has one home.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/support/narrow_frame.rb     | 21 +++++++++++++--------
 spec/system/narrow_frame_spec.rb |  8 ++++++++
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/spec/support/narrow_frame.rb b/spec/support/narrow_frame.rb
index d034ff25..37b4f6be 100644
--- a/spec/support/narrow_frame.rb
+++ b/spec/support/narrow_frame.rb
@@ -22,20 +22,25 @@ def open_in_narrow_frame(path, width:, ready:, height: 800)
     [ page.evaluate_script("document.getElementById('narrow').contentWindow.innerWidth"), narrow_frame_fits? ]
   end
 
-  # Whether the page in the narrow frame fits without horizontal scrolling, measured now.
-  # Call it from the top page, outside within_narrow_frame (it reaches the frame through #narrow).
+  # Whether the page the driver is in (the top page, or the frame's inside within_narrow_frame) fits without horizontal
+  # scrolling, measured now. The one measure of sideways overflow, so a check never has to write it again (#318).
   #
   # The page's scrollWidth is compared with the documentElement's clientWidth, the width the layout has, and not with
   # innerWidth: innerWidth includes a vertical scrollbar (classic in system specs, #271, about 15px on a Mac and 12px on
-  # CI), which the frame draws whenever its page is taller than it, so a page scrolling sideways by up to that much would
-  # pass (#318).
+  # CI), which the page has whenever it is taller than its window or frame, so a page scrolling sideways by up to that
+  # much would pass.
+  #
+  # @return [Boolean]
+  def page_fits_sideways?
+    page.evaluate_script("document.documentElement.scrollWidth <= document.documentElement.clientWidth")
+  end
+
+  # Whether the page in the narrow frame fits without horizontal scrolling, measured now (see page_fits_sideways?).
+  # Call it from the top page, outside within_narrow_frame, which it enters itself.
   #
   # @return [Boolean]
   def narrow_frame_fits?
-    page.evaluate_script(<<~JS)
-      (() => { const doc = document.getElementById("narrow").contentWindow.document.documentElement
-        return doc.scrollWidth <= doc.clientWidth })()
-    JS
+    within_narrow_frame { page_fits_sideways? }
   end
 
   def within_narrow_frame(&)
diff --git a/spec/system/narrow_frame_spec.rb b/spec/system/narrow_frame_spec.rb
index 2926413c..756e55db 100644
--- a/spec/system/narrow_frame_spec.rb
+++ b/spec/system/narrow_frame_spec.rb
@@ -38,4 +38,12 @@ def overflow_frame_page(overflow)
     expect(measured["overflow"]).to eq(5)
     expect(narrow_frame_fits?).to be(false)
   end
+
+  # The same trap for the checks that run inside within_narrow_frame, or on the top page, and measure the page they are in.
+  it "reports the same overflow for the page the driver is in", :aggregate_failures do
+    open_sign_up_frame
+    within_narrow_frame { expect(page_fits_sideways?).to be(true) }
+    overflow_frame_page(5)
+    within_narrow_frame { expect(page_fits_sideways?).to be(false) }
+  end
 end

From 8086c138f827c9a7e6fe487ec402e5f6e6f4f6dd Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:30:39 -0500
Subject: [PATCH 05/15] test(system): seven specs measure sideways overflow
 with the shared helpers (#318)

Their own fits? and frame_fits? compared scrollWidth with innerWidth, the trap
of the helper's fix. They now call page_fits_sideways? and narrow_frame_fits?.
91 examples green before and after: nothing was hiding in these files.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/system/bulk_move_spec.rb               |  4 +---
 spec/system/card_page_decks_spec.rb         |  8 +++-----
 spec/system/deck_additions_spec.rb          |  4 +---
 spec/system/deck_proxies_spec.rb            |  3 +--
 spec/system/deck_proxy_replacements_spec.rb |  5 ++---
 spec/system/decks_spec.rb                   | 21 +++++++++------------
 spec/system/narrow_bulk_pages_spec.rb       |  8 +++-----
 7 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/spec/system/bulk_move_spec.rb b/spec/system/bulk_move_spec.rb
index 3e57faa4..351e9f0e 100644
--- a/spec/system/bulk_move_spec.rb
+++ b/spec/system/bulk_move_spec.rb
@@ -6,8 +6,6 @@
   let(:account) { user.account }
   let!(:blue) { create(:location, account:, name: "Blue binder") }
 
-  def frame_fits? = page.evaluate_script("(() => { const view = document.getElementById('narrow').contentWindow; return view.document.documentElement.scrollWidth <= view.innerWidth })()")
-
   # Tab until the element with this id has focus, as a keyboard does.
   def tab_to(id)
     20.times do
@@ -79,6 +77,6 @@ def tab_to(id)
       expect(page).to have_css("h1", text: "Move 9,999 items").and have_css(".c-appbar__back")
       expect(page).to have_select("To", options: [ "Choose…", "No location", "Blue binder" ])
     end
-    expect(frame_fits?).to be(true)
+    expect(narrow_frame_fits?).to be(true)
   end
 end
diff --git a/spec/system/card_page_decks_spec.rb b/spec/system/card_page_decks_spec.rb
index 4780cb8c..feed3e3d 100644
--- a/spec/system/card_page_decks_spec.rb
+++ b/spec/system/card_page_decks_spec.rb
@@ -9,8 +9,6 @@
 
   def set_theme(name) = page.execute_script("document.documentElement.dataset.theme = #{name.to_json}")
 
-  def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")
-
   describe "the stats strip (AC-5.1)" do
     before do
       older = create(:mtg_printing, entry: create(:catalog_entry, identity: card.identity, released_on: Date.new(2020, 1, 1))).entry
@@ -36,7 +34,7 @@ def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window
                          clipped: parts.some((el) => el.scrollWidth > el.clientWidth + 1) } })()
             JS
             expect(shown).to eq("texts" => %w[24,690 12,345 12,345], "oneRow" => true, "clipped" => false)
-            expect(fits?).to be(true)
+            expect(page_fits_sideways?).to be(true)
           end
         end
       end
@@ -67,7 +65,7 @@ def section_width = page.evaluate_script('document.querySelector("#in-decks .c-c
             expect(shown_headers).to eq([ "Deck", "Owned", "Proxy" ])
             expect(page).to have_css("#in-decks tbody tr:first-child .c-table__sub", text: "Modern · Main", visible: :visible)
             expect(find("#in-decks td:first-child a", match: :first).native.rect.height).to be > 20 # the 60-character name wraps
-            expect(fits?).to be(true)
+            expect(page_fits_sideways?).to be(true)
           end
         end
       end
@@ -81,7 +79,7 @@ def section_width = page.evaluate_script('document.querySelector("#in-decks .c-c
           expect(shown_headers).to eq([ "Deck", "Zone", "Owned", "Proxy" ])
           expect(page).to have_css("#in-decks tbody tr:first-child span.is-muted", text: "· Modern", visible: :visible)
           expect(page).to have_no_css("#in-decks .c-table__sub", visible: :visible)
-          expect(fits?).to be(true)
+          expect(page_fits_sideways?).to be(true)
         end
       end
     end
diff --git a/spec/system/deck_additions_spec.rb b/spec/system/deck_additions_spec.rb
index 227b74b6..83104cbd 100644
--- a/spec/system/deck_additions_spec.rb
+++ b/spec/system/deck_additions_spec.rb
@@ -4,8 +4,6 @@
 RSpec.describe "Add to deck", type: :system do
   def set_theme(name) = page.execute_script("document.documentElement.dataset.theme = #{name.to_json}") # no colour is read here, so no pause (testing.md: no sleep)
 
-  def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")
-
   # The drawn height of every control of the page, by kind. `html` is pinned to a scrollbar in both pointer states, so a
   # taller page can't narrow the layout by a scrollbar's width and move what wraps (spec 072's lesson).
   def control_heights
@@ -39,7 +37,7 @@ def control_heights
           open_in_narrow_frame(new_catalog_entry_deck_addition_path(wide_entry), width:, ready: "main")
           within_narrow_frame do
             set_theme(theme)
-            expect(fits?).to be(true)
+            expect(page_fits_sideways?).to be(true)
             overflow = page.evaluate_script(<<~JS)
               (() => { const form = document.querySelector(".c-form").getBoundingClientRect()
                 const select = document.querySelector("#deck_zone").getBoundingClientRect()
diff --git a/spec/system/deck_proxies_spec.rb b/spec/system/deck_proxies_spec.rb
index 5d1b6dc9..2b4e99e7 100644
--- a/spec/system/deck_proxies_spec.rb
+++ b/spec/system/deck_proxies_spec.rb
@@ -8,7 +8,6 @@
   let!(:long) { create(:mtg_printing, entry: create(:catalog_entry, name: "W" * 60), finishes: %w[foil nonfoil]).entry } # a 60-character name with no space
 
   def set_theme(name) = page.execute_script("document.documentElement.dataset.theme = #{name.to_json}")
-  def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")
 
   before do
     create(:mtg_printing, entry: create(:catalog_entry, name: "Lightning Bolt", set: create(:catalog_set, code: "mh2"), number: "138"), finishes: %w[foil nonfoil])
@@ -47,7 +46,7 @@ def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window
             open_in_narrow_frame(path, width:, ready: "main")
             within_narrow_frame do
               set_theme(theme)
-              expect(fits?).to be(true), "#{path} at #{width}px in #{theme}"
+              expect(page_fits_sideways?).to be(true), "#{path} at #{width}px in #{theme}"
             end
           end
         end
diff --git a/spec/system/deck_proxy_replacements_spec.rb b/spec/system/deck_proxy_replacements_spec.rb
index 9ef0f165..5bf62a63 100644
--- a/spec/system/deck_proxy_replacements_spec.rb
+++ b/spec/system/deck_proxy_replacements_spec.rb
@@ -4,7 +4,6 @@
 # and 1280px in both themes with the worst-case names (AC-6.1), and the touch-floor rules read (AC-6.2).
 RSpec.describe "Replacing a proxy", type: :system do
   def set_theme(name) = page.execute_script("document.documentElement.dataset.theme = #{name.to_json}")
-  def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")
 
   def entry_of(name = "Lightning Bolt", set: "mh2", number: "138") = create(:mtg_printing, finishes: %w[foil nonfoil], entry: create(:catalog_entry, name:, set: create(:catalog_set, code: set), number:)).entry
 
@@ -105,7 +104,7 @@ def entry_of(name = "Lightning Bolt", set: "mh2", number: "138") = create(:mtg_p
             open_in_narrow_frame(path, width:, ready: "main")
             within_narrow_frame do
               set_theme(theme)
-              expect(fits?).to be(true), "#{path} at #{width}px in #{theme}"
+              expect(page_fits_sideways?).to be(true), "#{path} at #{width}px in #{theme}"
             end
           end
         end
@@ -123,7 +122,7 @@ def entry_of(name = "Lightning Bolt", set: "mh2", number: "138") = create(:mtg_p
               send(submit)
               expect(page).to have_css(".c-field__error")
               expect(page).to have_css(described)
-              expect(fits?).to be(true), "#{path} refused at #{width}px in #{theme}"
+              expect(page_fits_sideways?).to be(true), "#{path} refused at #{width}px in #{theme}"
             end
           end
         end
diff --git a/spec/system/decks_spec.rb b/spec/system/decks_spec.rb
index 47a2cf28..1a4a0110 100644
--- a/spec/system/decks_spec.rb
+++ b/spec/system/decks_spec.rb
@@ -5,9 +5,6 @@
   let!(:user) { system_sign_in_as(create(:user)) }
   let(:account) { user.account }
 
-  # Whether the frame's page scrolls sideways, and what the narrow frame's page reports.
-  def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")
-
   describe "the Decks page at 360px (AC-4.5)" do
     let(:long_name) { "W" * 60 }
 
@@ -27,7 +24,7 @@ def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window
         expect(page).to have_css(".c-decks .c-table__sub", text: "Casual · 0 owned")
         name = find(".c-decks td:first-child .c-table__item span", text: long_name, match: :first)
         expect(name.native.rect.height).to be > 20 # more than one line: the name wraps
-        expect(fits?).to be(true)
+        expect(page_fits_sideways?).to be(true)
         expect(page).to have_link("New deck") # stays visible on a phone (spec 060 decision 24)
         expect(find_link("New deck").native.rect.height).to be >= 36
       end
@@ -38,7 +35,7 @@ def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window
       expect(page).to have_css(".c-decks thead th", text: "Format")
       expect(page).to have_css(".c-decks thead th", text: "Owned")
       expect(page).to have_css(".c-decks td", text: "Modern")
-      expect(fits?).to be(true)
+      expect(page_fits_sideways?).to be(true)
     end
   end
 
@@ -63,7 +60,7 @@ def set_theme(name) = page.execute_script("document.documentElement.dataset.them
         expect(shown).to eq([ "Deck", "Cards", "Actions" ])
         expect(find(".c-decks .c-table__sub").text.squish).to eq("Modern · 58 owned Proxy 11")
         expect(page).to have_css(".c-decks .c-table__sub .c-proxy", text: /Proxy\s+11/)
-        expect(fits?).to be(true)
+        expect(page_fits_sideways?).to be(true)
       end
     end
 
@@ -73,7 +70,7 @@ def set_theme(name) = page.execute_script("document.documentElement.dataset.them
           open_in_narrow_frame(decks_path, width:, ready: ".c-decks table")
           within_narrow_frame do
             set_theme(theme)
-            expect(fits?).to be(true)
+            expect(page_fits_sideways?).to be(true)
             boxes = page.evaluate_script(<<~JS)
               (() => { const row = document.querySelector(".c-decks tbody tr")
                 const visible = (el) => el.getClientRects().length > 0
@@ -100,7 +97,7 @@ def set_theme(name) = page.execute_script("document.documentElement.dataset.them
           })()
         JS
         expect(inside).to be(true)
-        expect(fits?).to be(true)
+        expect(page_fits_sideways?).to be(true)
         expect(page).to have_select("Format", selected: "Casual")
       end
     end
@@ -135,7 +132,7 @@ def set_theme(name) = page.execute_script("document.documentElement.dataset.them
         expect(page).to have_link("Back to decks")
         expect(page).to have_css("main button", text: "Move them in bulk mode")
         expect(page).to have_no_css("main button", text: /\ARemove/)
-        expect(fits?).to be(true)
+        expect(page_fits_sideways?).to be(true)
       end
     end
   end
@@ -169,10 +166,10 @@ def set_theme(name) = page.execute_script("document.documentElement.dataset.them
       create(:deck, account:, name: "W" * 60, format: "casual")
 
       open_in_narrow_frame(decks_path, width: 360, ready: ".c-decks table")
-      within_narrow_frame { expect(fits?).to be(true) }
+      within_narrow_frame { expect(page_fits_sideways?).to be(true) }
 
       open_in_narrow_frame(edit_deck_format_path(account.decks.first), width: 360, ready: ".c-decks form")
-      within_narrow_frame { expect(fits?).to be(true) }
+      within_narrow_frame { expect(page_fits_sideways?).to be(true) }
     end
 
     # Between the buttons' 640px breakpoint and the table's own container query a name does not wrap by the viewport alone.
@@ -184,7 +181,7 @@ def set_theme(name) = page.execute_script("document.documentElement.dataset.them
           open_in_narrow_frame(decks_path, width:, ready: ".c-decks table")
           within_narrow_frame do
             expect(page).to have_css(".c-decks__actions a", count: 3)
-            expect(fits?).to be(true)
+            expect(page_fits_sideways?).to be(true)
           end
         end
       end
diff --git a/spec/system/narrow_bulk_pages_spec.rb b/spec/system/narrow_bulk_pages_spec.rb
index a25a548a..f82adb83 100644
--- a/spec/system/narrow_bulk_pages_spec.rb
+++ b/spec/system/narrow_bulk_pages_spec.rb
@@ -9,8 +9,6 @@
     visit collection_path
   end
 
-  def frame_fits? = page.evaluate_script("(() => { const view = document.getElementById('narrow').contentWindow; return view.document.documentElement.scrollWidth <= view.innerWidth })()")
-
   def select_all_and_choose(action)
     open_in_narrow_frame(collection_path(bulk: 1), width: 360, ready: ".c-bulkbar")
     within_narrow_frame do
@@ -31,18 +29,18 @@ def select_all_and_choose(action)
       click_on "Edit many"
       expect(page).to have_css(".c-bulkbar")
     end
-    expect(frame_fits?).to be(true)
+    expect(narrow_frame_fits?).to be(true)
   end
 
   it "fits the Set condition page, with a Back link", :aggregate_failures do
     select_all_and_choose("Set condition…")
     within_narrow_frame { expect(page).to have_css("h1", text: "Set the condition of 9,999 items").and have_css(".c-appbar__back") }
-    expect(frame_fits?).to be(true)
+    expect(narrow_frame_fits?).to be(true)
   end
 
   it "fits the removal confirmation, with a Back link", :aggregate_failures do
     select_all_and_choose("Remove")
     within_narrow_frame { expect(page).to have_css("h1", text: "Remove 9,999 items?").and have_css(".c-appbar__back") }
-    expect(frame_fits?).to be(true)
+    expect(narrow_frame_fits?).to be(true)
   end
 end

From bbc9aefaa6961a4ad134d6e2256d94e3efba0b3c Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:31:36 -0500
Subject: [PATCH 06/15] test(system): seven specs' single overflow checks call
 page_fits_sideways? (#318)

Ten inline scrollWidth <= window.innerWidth expectations, same trap as the
helper's. 103 examples green before and after.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/system/collection_import_preview_spec.rb     | 4 ++--
 spec/system/deck_bulk_shortcut_spec.rb            | 2 +-
 spec/system/design_system_deck_components_spec.rb | 6 +++---
 spec/system/design_system_deck_rules_spec.rb      | 2 +-
 spec/system/location_bulk_shortcut_spec.rb        | 2 +-
 spec/system/locations_spec.rb                     | 4 ++--
 spec/system/scanner_sitting_spec.rb               | 2 +-
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/spec/system/collection_import_preview_spec.rb b/spec/system/collection_import_preview_spec.rb
index fa0e93fc..4baec9d0 100644
--- a/spec/system/collection_import_preview_spec.rb
+++ b/spec/system/collection_import_preview_spec.rb
@@ -53,7 +53,7 @@ def version_three_file(entry)
 
     expect(page).to have_text("Its location “Nowhere in the file” isn't one of the file's locations.")
     expect(page).to have_text("in Blue binder with a rather long name for a phone")
-    expect(page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")).to be(true)
+    expect(page_fits_sideways?).to be(true)
   end
 
   # Spec 062 AC-7.1, AC-7.5: the collector's own export, decks and a copy in a zone included, previews with the Decks section; a
@@ -81,6 +81,6 @@ def preview_file(data)
 
     expect(page).to have_css("#format_changed_decks li", text: "#{long_name}:")
     expect(page).to have_css("#removed_decks li", text: "Elves")
-    expect(page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")).to be(true)
+    expect(page_fits_sideways?).to be(true)
   end
 end
diff --git a/spec/system/deck_bulk_shortcut_spec.rb b/spec/system/deck_bulk_shortcut_spec.rb
index cec08025..38a21c00 100644
--- a/spec/system/deck_bulk_shortcut_spec.rb
+++ b/spec/system/deck_bulk_shortcut_spec.rb
@@ -53,7 +53,7 @@
         expect(open_in_narrow_frame(new_deck_removal_path(deck), width: 360, ready: "main")).to eq([ 360, true ])
         within_narrow_frame do
           page.execute_script("document.documentElement.setAttribute('data-theme', arguments[0])", theme)
-          expect(page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")).to be(true), theme
+          expect(page_fits_sideways?).to be(true), theme
           small = page.evaluate_script("[...document.querySelectorAll('main a, main button')].filter((el) => { const box = el.getBoundingClientRect(); return box.height < 44 || box.width < 44 }).map((el) => el.outerHTML.slice(0, 60))")
           expect(small).to eq([]), theme
           expect(page.evaluate_script("document.querySelector('main .c-form__actions').firstElementChild.textContent.trim()")).to start_with("Move them in bulk mode")
diff --git a/spec/system/design_system_deck_components_spec.rb b/spec/system/design_system_deck_components_spec.rb
index bbade744..4dc6b9e0 100644
--- a/spec/system/design_system_deck_components_spec.rb
+++ b/spec/system/design_system_deck_components_spec.rb
@@ -649,7 +649,7 @@ def four_symbol_rows = zone_rows + [ zrow(long_name, cost: %w[2 W U B R G]), zro
         blank_host
         add_to_main(zone_html("Main", four_symbol_rows, id: "probe"))
         expect(cost_of("Cryptic Command")["height"]).to be_within(1).of(22)
-        expect(evaluate("return document.documentElement.scrollWidth <= window.innerWidth")).to be(true)
+        expect(page_fits_sideways?).to be(true)
       end
     end
 
@@ -842,7 +842,7 @@ def phone_head(**)
         add_to_main(new_deck_html)
         first, second = box("#probe .c-field:nth-child(1)"), box("#probe .c-field:nth-child(2)")
         expect(second["top"]).to be >= first["bottom"]
-        expect(evaluate("return document.documentElement.scrollWidth <= window.innerWidth")).to be(true)
+        expect(page_fits_sideways?).to be(true)
       end
     end
   end
@@ -911,7 +911,7 @@ def expect_lot(state)
         states = lot_states
         states.each { expect_lot(it) }
         expect(states[1]["top"] - states[0]["bottom"]).to be_within(0.5).of(12)
-        expect(evaluate("return document.documentElement.scrollWidth <= window.innerWidth")).to be(true)
+        expect(page_fits_sideways?).to be(true)
       end
     end
 
diff --git a/spec/system/design_system_deck_rules_spec.rb b/spec/system/design_system_deck_rules_spec.rb
index f5d1b494..459a06cb 100644
--- a/spec/system/design_system_deck_rules_spec.rb
+++ b/spec/system/design_system_deck_rules_spec.rb
@@ -265,7 +265,7 @@ def logo
         open_in_narrow_frame(collection_path, width:, ready: "main", height: 1200)
         within_narrow_frame do
           expect(evaluate("return [...document.querySelectorAll('.c-appbar__nav a')].map((el) => el.textContent.trim())")).to eq(%w[Collection Decks Search Scan Locations])
-          expect(evaluate("return document.documentElement.scrollWidth <= window.innerWidth")).to be(true)
+          expect(page_fits_sideways?).to be(true)
         end
       end
     end
diff --git a/spec/system/location_bulk_shortcut_spec.rb b/spec/system/location_bulk_shortcut_spec.rb
index 980b0667..b9a1a178 100644
--- a/spec/system/location_bulk_shortcut_spec.rb
+++ b/spec/system/location_bulk_shortcut_spec.rb
@@ -50,7 +50,7 @@
       expect(open_in_narrow_frame(new_location_removal_path(blue), width: 360, ready: "main")).to eq([ 360, true ])
       within_narrow_frame do
         page.execute_script("document.documentElement.setAttribute('data-theme', arguments[0])", theme)
-        expect(page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")).to be(true), theme
+        expect(page_fits_sideways?).to be(true), theme
         small = page.evaluate_script("[...document.querySelectorAll('main a, main button')].filter((el) => { const box = el.getBoundingClientRect(); return box.height < 44 || box.width < 44 }).map((el) => el.outerHTML.slice(0, 60))")
         expect(small).to eq([]), theme
         expect(page.evaluate_script("document.querySelector('main .c-form__actions').firstElementChild.textContent.trim()")).to start_with("Move them in bulk mode")
diff --git a/spec/system/locations_spec.rb b/spec/system/locations_spec.rb
index f25a6967..76d82cea 100644
--- a/spec/system/locations_spec.rb
+++ b/spec/system/locations_spec.rb
@@ -57,7 +57,7 @@ def targets = <<~JS
       expect(open_in_narrow_frame(path, width:, ready: "main")).to eq([ width, true ]), "#{path} at #{width}px"
       within_narrow_frame do
         page.execute_script("document.documentElement.setAttribute('data-theme', arguments[0])", theme)
-        expect(page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")).to be(true), "#{path} at #{width}px, #{theme}"
+        expect(page_fits_sideways?).to be(true), "#{path} at #{width}px, #{theme}"
         # Measured, not declared: the box each target really has (plan review m4).
         small = page.evaluate_script("#{targets}.filter((el) => { const box = el.getBoundingClientRect(); return box.height < 44 || box.width < 44 }).map((el) => el.outerHTML.slice(0, 60))")
         expect(small).to eq([]), "#{path} at #{width}px, #{theme}: a target under 44px"
@@ -88,7 +88,7 @@ def targets = <<~JS
 
     expect(open_in_narrow_frame(new_location_removal_path(blue), width: 360, ready: "main")).to eq([ 360, true ])
     within_narrow_frame do
-      expect(page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")).to be(true)
+      expect(page_fits_sideways?).to be(true)
       expect(page.evaluate_script("[...document.querySelectorAll('main button, main input[type=submit]')].map((el) => el.textContent.trim())")).to eq([ "Move them in bulk mode from “Blue binder”" ]) # spec 059: the shortcut, and no Remove (spec 032 AC-5.2)
       expect(page.evaluate_script("#{targets}.filter((el) => { const box = el.getBoundingClientRect(); return box.height < 44 || box.width < 44 }).length")).to eq(0)
     end
diff --git a/spec/system/scanner_sitting_spec.rb b/spec/system/scanner_sitting_spec.rb
index 7b81c668..db6264c5 100644
--- a/spec/system/scanner_sitting_spec.rb
+++ b/spec/system/scanner_sitting_spec.rb
@@ -199,7 +199,7 @@ def entry_metas = all("#scanner_sitting li .c-list__meta").map { it.text.squish
       page.current_window.resize_to(1280, 900)
       visit scanner_path
       expect(page).to have_css("#scanner_sitting select#sitting_condition")
-      expect(page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")).to be(true)
+      expect(page_fits_sideways?).to be(true)
     end
   end
 

From 5ec2aed678b9aaf0916dda6d8031d0c96e4fd52f Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:32:29 -0500
Subject: [PATCH 07/15] test(system): overflow measures inside JS results
 compare with clientWidth (#318)

Six checks that sit in a script's result object, so they can't call the Ruby
helper, now read documentElement.clientWidth. 99 examples green before and after.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/system/card_page_spec.rb                     | 2 +-
 spec/system/deck_additions_spec.rb                | 2 +-
 spec/system/design_system_deck_components_spec.rb | 4 ++--
 spec/system/design_system_deck_rules_spec.rb      | 2 +-
 spec/system/locations_spec.rb                     | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/spec/system/card_page_spec.rb b/spec/system/card_page_spec.rb
index 0f2de6db..3f9fe3d9 100644
--- a/spec/system/card_page_spec.rb
+++ b/spec/system/card_page_spec.rb
@@ -66,7 +66,7 @@ def head_row_fits
         return { oneLine: Math.max(...controls.map((c) => c.height)) >= box.height - 1, tall: controls.every((c) => c.height >= 44),
                  inside: controls.every((c) => c.left >= box.left - 0.5 && c.right <= box.right + 0.5),
                  unclipped: primary.scrollWidth <= primary.clientWidth + 1,
-                 overflow: document.documentElement.scrollWidth > window.innerWidth } })()
+                 overflow: document.documentElement.scrollWidth > document.documentElement.clientWidth } })()
     JS
   end
 
diff --git a/spec/system/deck_additions_spec.rb b/spec/system/deck_additions_spec.rb
index 83104cbd..4683790f 100644
--- a/spec/system/deck_additions_spec.rb
+++ b/spec/system/deck_additions_spec.rb
@@ -71,7 +71,7 @@ def refusal_sentence_overflow
       page.evaluate_script(<<~JS)
         (() => { const sentence = document.querySelector(".c-field__error"), text = document.createRange() // the drawn text, not the box
           text.selectNodeContents(sentence)
-          return { page: document.documentElement.scrollWidth <= window.innerWidth,
+          return { page: document.documentElement.scrollWidth <= document.documentElement.clientWidth,
                    edge: text.getBoundingClientRect().right <= window.innerWidth, scroll: sentence.scrollWidth <= sentence.clientWidth } })()
       JS
     end
diff --git a/spec/system/design_system_deck_components_spec.rb b/spec/system/design_system_deck_components_spec.rb
index 4dc6b9e0..2635393e 100644
--- a/spec/system/design_system_deck_components_spec.rb
+++ b/spec/system/design_system_deck_components_spec.rb
@@ -798,7 +798,7 @@ def head_state
         const actions = getComputedStyle(document.querySelector("#probe .c-pagehead__actions")), button = document.querySelector("#probe .c-btn--primary")
         const shown = button.getClientRects().length > 0 && getComputedStyle(button).display !== "none"
         return { actions: actions.display, shown, height: button.getBoundingClientRect().height,
-                 fits: document.documentElement.scrollWidth <= window.innerWidth }
+                 fits: document.documentElement.scrollWidth <= document.documentElement.clientWidth }
       JS
     end
 
@@ -854,7 +854,7 @@ def add_fit
         const rect = (selector) => document.querySelector(selector).getBoundingClientRect()
         const text = document.createRange()
         text.selectNodeContents(document.querySelector("#probe .c-check"))
-        return { fits: document.documentElement.scrollWidth <= window.innerWidth, select: rect("#deck_zone").width, form: rect("#probe .c-form").width,
+        return { fits: document.documentElement.scrollWidth <= document.documentElement.clientWidth, select: rect("#deck_zone").width, form: rect("#probe .c-form").width,
                  textRight: text.getBoundingClientRect().right, fieldsetRight: rect("#probe .c-choices").right }
       JS
     end
diff --git a/spec/system/design_system_deck_rules_spec.rb b/spec/system/design_system_deck_rules_spec.rb
index 459a06cb..f110176e 100644
--- a/spec/system/design_system_deck_rules_spec.rb
+++ b/spec/system/design_system_deck_rules_spec.rb
@@ -201,7 +201,7 @@ def header_fit
         return { links: links.length, lines: new Set(links.map((el) => Math.round(el.getBoundingClientRect().top))).size,
                  inside: links.every((el) => el.getBoundingClientRect().right <= box.right + 0.5),
                  beforeAccount: box.right <= actions.left, accountInside: actions.right <= barEnd + 0.5,
-                 scrolls: document.documentElement.scrollWidth > window.innerWidth }
+                 scrolls: document.documentElement.scrollWidth > document.documentElement.clientWidth }
       JS
     end
 
diff --git a/spec/system/locations_spec.rb b/spec/system/locations_spec.rb
index 76d82cea..e7874eba 100644
--- a/spec/system/locations_spec.rb
+++ b/spec/system/locations_spec.rb
@@ -33,7 +33,7 @@
           const nav = document.querySelector(".c-appbar__nav").getBoundingClientRect()
           const actions = document.querySelector(".c-appbar__actions").getBoundingClientRect()
           return [links.length, new Set(links.map((link) => Math.round(link.getBoundingClientRect().top))).size,
-            nav.right <= actions.left, document.documentElement.scrollWidth <= window.innerWidth]
+            nav.right <= actions.left, document.documentElement.scrollWidth <= document.documentElement.clientWidth]
         })()
       JS
     end

From 82234de058d35a2786014a48be3055d838a57fcc Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:33:15 -0500
Subject: [PATCH 08/15] test(support): open_in_viewport_frame opens a frame as
 wide as a phone's viewport (#318)

open_in_narrow_frame's width includes the classic scrollbar, so its 360px frame
lays a page out in about 345px. The new helper sizes the frame as the viewport
plus the measured scrollbar, as deck_shape_panel_spec's open_fold_in_frame does.
Its example was red (undefined method) first.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/support/narrow_frame.rb     | 22 ++++++++++++++++++++++
 spec/system/narrow_frame_spec.rb | 11 +++++++++++
 2 files changed, 33 insertions(+)

diff --git a/spec/support/narrow_frame.rb b/spec/support/narrow_frame.rb
index 37b4f6be..b9b9ac04 100644
--- a/spec/support/narrow_frame.rb
+++ b/spec/support/narrow_frame.rb
@@ -22,6 +22,28 @@ def open_in_narrow_frame(path, width:, ready:, height: 800)
     [ page.evaluate_script("document.getElementById('narrow').contentWindow.innerWidth"), narrow_frame_fits? ]
   end
 
+  # Loads path in a frame whose viewport (its documentElement.clientWidth) is viewport px wide, the way a phone of that width is:
+  # open_in_narrow_frame's width includes the frame's classic scrollbar, so a "360px" frame there lays a page out in 345px or 348px.
+  # The frame is the viewport plus the scrollbar it draws, measured (about 15px on a Mac, 12px on the Linux runner) and reopened
+  # once if the first guess was wrong.
+  #
+  # @param path [String] the page to load, on the current origin
+  # @param viewport [Integer] the width the page is laid out in, in px
+  # @param ready [String] a CSS selector that must be present in the frame before it is measured
+  # @param height [Integer] the frame's height in px
+  # @return [Integer] the viewport the frame got, for the example to assert
+  def open_in_viewport_frame(path, viewport:, ready:, height: 800)
+    width = viewport + 15
+    2.times do
+      open_in_narrow_frame(path, width:, ready:, height:)
+      scrollbar = within_narrow_frame { page.evaluate_script("window.innerWidth - document.documentElement.clientWidth") }
+      break if viewport + scrollbar == width
+
+      width = viewport + scrollbar
+    end
+    within_narrow_frame { page.evaluate_script("document.documentElement.clientWidth") }
+  end
+
   # Whether the page the driver is in (the top page, or the frame's inside within_narrow_frame) fits without horizontal
   # scrolling, measured now. The one measure of sideways overflow, so a check never has to write it again (#318).
   #
diff --git a/spec/system/narrow_frame_spec.rb b/spec/system/narrow_frame_spec.rb
index 756e55db..756b8e41 100644
--- a/spec/system/narrow_frame_spec.rb
+++ b/spec/system/narrow_frame_spec.rb
@@ -39,6 +39,17 @@ def overflow_frame_page(overflow)
     expect(narrow_frame_fits?).to be(false)
   end
 
+  # A phone's viewport is its width, with no scrollbar taken from it; the frame's classic scrollbar is (about 12 to 15px by platform).
+  it "opens a frame whose viewport is the width asked for, whatever the scrollbar", :aggregate_failures do
+    visit new_registration_path
+    expect(open_in_viewport_frame(new_registration_path, viewport: 360, height: 320, ready: "main")).to eq(360)
+    within_narrow_frame do
+      expect(page.evaluate_script("document.documentElement.clientWidth")).to eq(360)
+      expect(page.evaluate_script("window.innerWidth")).to be > 360 # the scrollbar is drawn, and sits outside the viewport asked for
+    end
+    expect(narrow_frame_fits?).to be(true)
+  end
+
   # The same trap for the checks that run inside within_narrow_frame, or on the top page, and measure the page they are in.
   it "reports the same overflow for the page the driver is in", :aggregate_failures do
     open_sign_up_frame

From 1d4d4e29ba1a52ac30ba4af7c41bbfdf1838fbfc Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:34:19 -0500
Subject: [PATCH 09/15] test(system): deck page overflow checks use clientWidth
 and a true 360px viewport (#318)

fits? and two element-edge checks compared with innerWidth. With clientWidth, 3
examples failed at the 360px frame (AC-5.4/5.5 light and dark, and the zone
head one): the frame lays out in about 345px and the worst-case row's table
spills 10px past it, the spill spec 074 recorded at a true viewport. They now
open the frame as a 360px viewport (open_in_viewport_frame, 360 + measured
scrollbar) and pass, 29 examples. No page changes.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/system/deck_page_spec.rb | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/spec/system/deck_page_spec.rb b/spec/system/deck_page_spec.rb
index 0df1e464..2aa55f2b 100644
--- a/spec/system/deck_page_spec.rb
+++ b/spec/system/deck_page_spec.rb
@@ -28,7 +28,6 @@ def printing(name:, type_line: "Creature", cost: "{2}{W}{U}{B}{R}{G}", legalitie
   end
 
   def set_theme(name) = page.execute_script("document.documentElement.dataset.theme = #{name.to_json}")
-  def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")
 
   def shown_headers
     page.evaluate_script(<<~JS)
@@ -66,13 +65,23 @@ def column_boxes
     JS
   end
 
+  # 360px is a phone's viewport (spec 074 measured the worst case there: the document does not scroll sideways), so its frame is
+  # sized from the measured scrollbar. A "360px" narrow frame lays out in about 345px, where the worst-case row's table spills
+  # 10px past the page (#318: the old checks compared with innerWidth and could not see it). The wider widths are frames.
+  def open_deck_page_at(width)
+    ready = ".c-zone:first-of-type table"
+    return open_in_narrow_frame(deck_path(deck), width:, ready:) unless width == 360
+
+    expect(open_in_viewport_frame(deck_path(deck), viewport: 360, ready:)).to eq(360)
+  end
+
   [ 360, 640, 768, 1280 ].each do |width|
     %w[light dark].each do |theme|
       it "has no horizontal overflow at #{width}px in the #{theme} theme and keeps a six-symbol cost inside its cell (AC-5.4, AC-5.5)", :aggregate_failures do
-        open_in_narrow_frame(deck_path(deck), width:, ready: ".c-zone:first-of-type table")
+        open_deck_page_at(width)
         within_narrow_frame do
           set_theme(theme)
-          expect(fits?).to be(true)
+          expect(page_fits_sideways?).to be(true)
           worst = page.evaluate_script(<<~JS)
             (() => { const cost = [...document.querySelectorAll(".c-zone td:nth-child(2)")].find((td) => td.querySelectorAll(".c-mana").length === 6)
               return [cost.scrollWidth, cost.clientWidth] })()
@@ -191,12 +200,12 @@ def column_boxes
   end
 
   it "keeps each zone head inside the frame, with Add a proxy on the name's line, at 360px (NFR Accessibility)", :aggregate_failures do
-    open_in_narrow_frame(deck_path(deck), width: 360, ready: ".c-zone:first-of-type table")
+    open_deck_page_at(360)
     within_narrow_frame do
-      expect(fits?).to be(true)
+      expect(page_fits_sideways?).to be(true)
       heads = page.evaluate_script(<<~JS)
         [...document.querySelectorAll(".c-zone .c-section__head")].map((head) => { const title = head.querySelector(".c-section__title").getBoundingClientRect(), add = head.querySelector(".c-section__actions").getBoundingClientRect()
-          return { inside: add.right <= window.innerWidth, sameLine: add.top < title.bottom } })
+          return { inside: add.right <= document.documentElement.clientWidth, sameLine: add.top < title.bottom } })
       JS
       expect(heads).to all(eq({ "inside" => true, "sameLine" => true }))
     end
@@ -232,7 +241,7 @@ def column_boxes
   # Whether each of the head's parts lies inside the frame, and whether the name is cut.
   def head_boxes
     page.evaluate_script(<<~JS)
-      (() => { const title = document.querySelector(".c-item__title"), width = window.innerWidth
+      (() => { const title = document.querySelector(".c-item__title"), width = document.documentElement.clientWidth
         const inside = (el) => { const box = el.getBoundingClientRect(); return box.left >= 0 && box.right <= width }
         return { cut: title.scrollWidth > title.clientWidth, title: inside(title),
                  buttons: [...document.querySelectorAll(".c-item__actions .c-btn")].map(inside) } })()
@@ -244,7 +253,7 @@ def head_boxes
       open_in_narrow_frame(deck_path(create(:deck, account:, name: long_name)), width: 360, ready: ".c-item__head")
       within_narrow_frame do
         set_theme(theme)
-        expect(fits?).to be(true)
+        expect(page_fits_sideways?).to be(true)
         expect(head_boxes).to eq({ "cut" => false, "title" => true, "buttons" => [ true, true ] })
       end
     end

From 22260b2dd04edb969d5a9014f8510afbf6593720 Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:35:14 -0500
Subject: [PATCH 10/15] test(system): shape panel overflow example uses
 clientWidth and a true 360px viewport (#318)

With clientWidth the AC-5.1 example failed at the 360px frame (light and dark):
the frame lays out in about 345px and the zone table's worst-case row spills
10px past it, not the mana bar. It now opens a 360px viewport
(open_in_viewport_frame) and passes, 29 examples. Minimal edit: #330 adds
examples to this file.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/system/deck_shape_panel_spec.rb | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/spec/system/deck_shape_panel_spec.rb b/spec/system/deck_shape_panel_spec.rb
index 4fe6022b..5f137917 100644
--- a/spec/system/deck_shape_panel_spec.rb
+++ b/spec/system/deck_shape_panel_spec.rb
@@ -26,7 +26,6 @@ def card(name:, type_line: "Creature — Elf", cost: "{2}{W}{U}{B}{R}{G}", mana_
   end
 
   def set_theme(name) = page.execute_script("document.documentElement.dataset.theme = #{name.to_json}")
-  def fits? = page.evaluate_script("document.documentElement.scrollWidth <= window.innerWidth")
   def shown?(selector) = page.evaluate_script("(() => { const el = document.querySelector(#{selector.to_json}); return !!el && el.getClientRects().length > 0 })()")
 
   describe "the page container's widths (AC-1.3)" do
@@ -82,12 +81,16 @@ def shown?(selector) = page.evaluate_script("(() => { const el = document.queryS
   end
 
   [ 360, 640, 768, 1280 ].product(%w[light dark]).each do |width, theme|
-    it "has no horizontal overflow at #{width}px in the #{theme} theme with every panel part full (AC-5.1)" do
-      open_in_narrow_frame(deck_path(deck), width:, ready: ".c-deck__zones")
+    it "has no horizontal overflow at #{width}px in the #{theme} theme with every panel part full (AC-5.1)", :aggregate_failures do
+      if width == 360 # a phone's viewport: a 360px frame lays out in about 345px, where the zone table's worst row spills (#318)
+        expect(open_in_viewport_frame(deck_path(deck), viewport: 360, ready: ".c-deck__zones")).to eq(360)
+      else
+        open_in_narrow_frame(deck_path(deck), width:, ready: ".c-deck__zones")
+      end
       within_narrow_frame do
         page.execute_script("document.documentElement.dataset.theme = #{theme.to_json}")
         page.execute_script('document.querySelector("details.c-shapefold").open = true')
-        expect(fits?).to be(true)
+        expect(page_fits_sideways?).to be(true)
       end
     end
   end

From 24d6d0da92344a83f6317bbc60d33ac6cc06b2e7 Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:35:40 -0500
Subject: [PATCH 11/15] test(system): add-to-deck edge checks compare with
 clientWidth (#318)

Two element-edge checks (the title's and the sentence's right edge) read
window.innerWidth, the same blind spot as the overflow checks. 15 examples green.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/system/deck_additions_spec.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/system/deck_additions_spec.rb b/spec/system/deck_additions_spec.rb
index 4683790f..b3cafc19 100644
--- a/spec/system/deck_additions_spec.rb
+++ b/spec/system/deck_additions_spec.rb
@@ -43,7 +43,7 @@ def control_heights
                 const select = document.querySelector("#deck_zone").getBoundingClientRect()
                 const text = document.createRange(); text.selectNodeContents(document.querySelector(".c-pick .c-check"))
                 return { select: select.width <= form.width, text: text.getBoundingClientRect().right <= document.querySelector(".c-pick").getBoundingClientRect().right + 0.5,
-                         title: document.querySelector(".c-pagehead__title").getBoundingClientRect().right <= window.innerWidth } })()
+                         title: document.querySelector(".c-pagehead__title").getBoundingClientRect().right <= document.documentElement.clientWidth } })()
             JS
             expect(overflow).to eq("select" => true, "text" => true, "title" => true)
           end
@@ -72,7 +72,7 @@ def refusal_sentence_overflow
         (() => { const sentence = document.querySelector(".c-field__error"), text = document.createRange() // the drawn text, not the box
           text.selectNodeContents(sentence)
           return { page: document.documentElement.scrollWidth <= document.documentElement.clientWidth,
-                   edge: text.getBoundingClientRect().right <= window.innerWidth, scroll: sentence.scrollWidth <= sentence.clientWidth } })()
+                   edge: text.getBoundingClientRect().right <= document.documentElement.clientWidth, scroll: sentence.scrollWidth <= sentence.clientWidth } })()
       JS
     end
 

From ab3e353db13281c1c1a9c89e88d2064fb4066748 Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:40:11 -0500
Subject: [PATCH 12/15] test(system): footer gutter and scanner width checks
 measure the viewport, not the frame (#318)

footer_spec compared the footer text's right edge with the frame's width minus
the gutter, which includes the scrollbar (a variant of the trap that no
innerWidth grep finds): it now reads clientWidth. scanner_sitting_spec compared
scrollWidth with 360/390, the same weak copy: three checks call
page_fits_sideways?. 58 examples green across the four files.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/system/footer_spec.rb          | 5 +++--
 spec/system/scanner_sitting_spec.rb | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/spec/system/footer_spec.rb b/spec/system/footer_spec.rb
index 925b78d5..aa2d25bf 100644
--- a/spec/system/footer_spec.rb
+++ b/spec/system/footer_spec.rb
@@ -23,6 +23,7 @@ def measure
           mainPadding: main ? getComputedStyle(main).paddingBottom : null,
           contentBottom: main && main.lastElementChild ? main.lastElementChild.getBoundingClientRect().bottom : null,
           gutter: main ? main.getBoundingClientRect().left + parseFloat(getComputedStyle(main).paddingLeft) : null,
+          viewport: document.documentElement.clientWidth,
           tabbarTop: tabbar && getComputedStyle(tabbar).position === "fixed" ? tabbar.getBoundingClientRect().top : null }
       })()
     JS
@@ -79,7 +80,7 @@ def colours
         expect(footer.values_at("tabbarTop", "scrolled")).to all(be_positive), "#{path} at #{width}px: no fixed tab bar, or nothing to scroll"
         expect(footer["lines"].map { |line| line["bottom"] }).to all(be <= footer["tabbarTop"]), "#{path} at #{width}px: text under the tab bar"
         expect(footer["lines"]).to all(include("uncovered" => true, "left" => footer["gutter"])), "#{path} at #{width}px: not on the gutter"
-        expect(footer["lines"].map { |line| line["right"] }).to all(be <= width - footer["gutter"]), "#{path} at #{width}px: text past the gutter"
+        expect(footer["lines"].map { |line| line["right"] }).to all(be <= footer["viewport"] - footer["gutter"]), "#{path} at #{width}px: text past the gutter"
         expect(footer["top"]).to be_within(0.5).of(footer["mainBottom"]), "#{path} at #{width}px: a gap after main"
         expect(footer["mainPadding"]).to eq("16px"), "#{path} at #{width}px: main keeps the tab bar's clearance as well"
       end
@@ -93,7 +94,7 @@ def colours
 
     expect(fits).to eq([ 360, true ])
     expect(footer["lines"]).to all(include("uncovered" => true, "left" => footer["gutter"]))
-    expect(footer["lines"].map { |line| line["right"] }).to all(be <= 360 - footer["gutter"])
+    expect(footer["lines"].map { |line| line["right"] }).to all(be <= footer["viewport"] - footer["gutter"])
   end
 
   it "clears the sticky filter bar and the bulk bar (AC-3.6)", :aggregate_failures do
diff --git a/spec/system/scanner_sitting_spec.rb b/spec/system/scanner_sitting_spec.rb
index db6264c5..f0d69d96 100644
--- a/spec/system/scanner_sitting_spec.rb
+++ b/spec/system/scanner_sitting_spec.rb
@@ -114,7 +114,7 @@ def entry_metas = all("#scanner_sitting li .c-list__meta").map { it.text.squish
       visit collection_path
       expect(open_in_narrow_frame(scanner_path, width: 360, ready: "#sitting_location_id")).to eq([ 360, true ])
       within_narrow_frame do
-        expect(page.evaluate_script("document.documentElement.scrollWidth")).to be <= 360
+        expect(page_fits_sideways?).to be(true)
         expect(page).to have_css("#scanner_sitting h2", text: "in #{long.name}")
       end
     end
@@ -125,7 +125,7 @@ def entry_metas = all("#scanner_sitting li .c-list__meta").map { it.text.squish
     visit collection_path
     expect(open_in_narrow_frame(scanner_path, width: 360, ready: ".c-scanner__stage:not([hidden])")).to eq([ 360, true ])
     within_narrow_frame do
-      expect(page.evaluate_script("document.documentElement.scrollWidth")).to be <= 360
+      expect(page_fits_sideways?).to be(true)
       expect(page.evaluate_script(%(document.querySelector(".c-scanner__shutter").getBoundingClientRect().top))).to be >= 800 * 2 / 3
     end
   end
@@ -193,7 +193,7 @@ def entry_metas = all("#scanner_sitting li .c-list__meta").map { it.text.squish
       visit collection_path
       expect(open_in_narrow_frame(scanner_path, width: 390, ready: "#sitting_condition")).to eq([ 390, true ])
       within_narrow_frame do
-        expect(page.evaluate_script("document.documentElement.scrollWidth")).to be <= 390
+        expect(page_fits_sideways?).to be(true)
         expect(page.evaluate_script(%(Array.from(document.querySelectorAll("#scanner_sitting select, #scanner_sitting input[type=submit]")).every(el => el.getBoundingClientRect().right <= document.getElementById("scanner_sitting").getBoundingClientRect().right + 1)))).to be(true)
       end
       page.current_window.resize_to(1280, 900)

From edb136b6e57efd715c872622e605f6b98b7d9ff9 Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:40:21 -0500
Subject: [PATCH 13/15] docs(support): review fixes for
 open_in_viewport_frame's contract, deck page's two 360px kinds, memory (#318)

The viewport helper's comment says the caller asserts the width it returns; its
example shows the overflow is under the scrollbar; deck_page_spec's header says
which 360px each group uses and the spill is 7 to 10px by platform; the memory
note names page_fits_sideways? and open_in_viewport_frame.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .claude/memory/headless-firefox-narrow-frame.md | 4 ++--
 spec/support/narrow_frame.rb                    | 5 ++++-
 spec/system/deck_page_spec.rb                   | 6 ++++--
 spec/system/narrow_frame_spec.rb                | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/.claude/memory/headless-firefox-narrow-frame.md b/.claude/memory/headless-firefox-narrow-frame.md
index 9488702e..4df89b4d 100644
--- a/.claude/memory/headless-firefox-narrow-frame.md
+++ b/.claude/memory/headless-firefox-narrow-frame.md
@@ -7,7 +7,7 @@ metadata:
 
 Headless Firefox (Selenium, system specs and screenshot scripts) clamps the window to at least 500px wide. A `driven_by … screen_size: [390, 844]` driver actually renders at 500px, so phone-width assertions silently test the wrong layout.
 
-- **Specs:** use `spec/support/narrow_frame.rb` (`open_in_narrow_frame(path, width:, height:, ready:)` returns `[innerWidth, no_horizontal_overflow]`, where "no overflow" compares `scrollWidth` with `clientWidth` since #318, and `narrow_frame_fits?` re-measures from the top page after a change inside the frame; `within_narrow_frame { … }`) with the normal driver. Media queries and container queries evaluate against the iframe's own width. Prove each narrow assertion by breaking the CSS once. Touch-target and coarse-pointer rules still can't be tested this way. The window must be taller than the frame: links below the window's bottom edge can't be clicked, and the click silently does nothing (seed 12061, 2026-10-31).
+- **Specs:** use `spec/support/narrow_frame.rb` (`open_in_narrow_frame(path, width:, height:, ready:)` returns `[innerWidth, no_horizontal_overflow]`, where "no overflow" compares `scrollWidth` with `clientWidth` since #318, and `narrow_frame_fits?` re-measures from the top page after a change inside the frame; `page_fits_sideways?` is the one overflow measure for the page the driver is in, top page or inside `within_narrow_frame`, so never write `scrollWidth <= innerWidth` again; `open_in_viewport_frame(path, viewport:, ready:)` opens a frame whose viewport is the width asked for and returns the viewport it got, which the example asserts; `within_narrow_frame { … }`) with the normal driver. Media queries and container queries evaluate against the iframe's own width. Prove each narrow assertion by breaking the CSS once. Touch-target and coarse-pointer rules still can't be tested this way. The window must be taller than the frame: links below the window's bottom edge can't be clicked, and the click silently does nothing (seed 12061, 2026-10-31).
 - **Screenshots:** inject a fixed-width iframe on a same-origin page, grow the frame to its content height, resize the window taller than the frame, then take an element screenshot of the frame. Without the taller window only the visible part is captured.
 - Separately named drivers (`options: { name: :firefox_dark }`) are still needed for different Firefox prefs, e.g. the dark theme, because Capybara reuses sessions by driver name.
 
@@ -20,4 +20,4 @@ Related: [[pr-screenshots-workflow]].
 - Measure related boxes in one script call. Two calls raced on the scanner page, which grows while the camera starts.
 - **Keyboard-only selects (spec 041, 2026-11-06):** under WebDriver in headless Firefox, arrow keys don't change a closed `<select>`'s value (its `selectedIndex` stays 0 whether or not the list opens). A keyboard-only example chooses by type-ahead instead: focus the select and `send_keys` the option's first letter.
 - **Scrollbars are pinned to classic (#271, 2026-11-10):** on a Mac, Firefox follows "Show scroll bars: Automatic" and draws overlay scrollbars (no width) when no mouse is connected, which made a 360px frame 15px wider than CI's and broke a wrap check locally only. `spec/support/system.rb` now sets `ui.useOverlayScrollbars = 0`. A driver registered under another name (the dark-theme ones) needs the same pref if it opens a narrow frame. See `docs/lessons/2026-11-10-a-local-only-failure-was-the-macs-scrollbar-setting.md`.
-- **A 360px frame is not a 360px phone (spec 069, 2026-11-11):** the frame keeps the forced classic scrollbar (15px on the Mac, about 12px on CI) and the body has an 8px margin, so a 360px frame's page container is 297px (360 − 15 − 16 body − 32 padding) and a deck-shape panel's interior 263px; a real 360px viewport gives a 312px container and a 278px interior. Model a phone as a **375px frame** (a 360px viewport). The `@container page` breakpoints (640px, 992px) are on the container (frame − 15 − 16 − page padding): a 640px frame is a 545px container and still shows the fold; the aside needs a frame of 735px or more. Write the chain in the spec; see `docs/lessons/2026-11-11-a-phone-width-criterion-needs-a-measured-chain.md` and #318 (the helper used to miss overflow a scrollbar hides; it compares with `clientWidth` now). The pinned classic scrollbar is 15px on the Mac but about 12px on the Linux CI runner (spec 069's first CI run, interior 281px vs 278px): size a phone frame from the measured `innerWidth - documentElement.clientWidth`, `360 + scrollbar`, not 375.
+- **A 360px frame is not a 360px phone (spec 069, 2026-11-11):** the frame keeps the forced classic scrollbar (15px on the Mac, about 12px on CI) and the body has an 8px margin, so a 360px frame's page container is 297px (360 − 15 − 16 body − 32 padding) and a deck-shape panel's interior 263px; a real 360px viewport gives a 312px container and a 278px interior. Model a phone with `open_in_viewport_frame` (a 360px viewport; a 375px frame is only right where the scrollbar is 15px). The `@container page` breakpoints (640px, 992px) are on the container (frame − 15 − 16 − page padding): a 640px frame is a 545px container and still shows the fold; the aside needs a frame of 735px or more. Write the chain in the spec; see `docs/lessons/2026-11-11-a-phone-width-criterion-needs-a-measured-chain.md` and #318 (the helper used to miss overflow a scrollbar hides; it compares with `clientWidth` now). The pinned classic scrollbar is 15px on the Mac but about 12px on the Linux CI runner (spec 069's first CI run, interior 281px vs 278px): `open_in_viewport_frame` sizes the frame from the measured scrollbar (`360 + innerWidth - clientWidth`), not 375. The zone table of the deck page's worst-case row (60-char name, 1,234 proxies) spills 7 to 10px past a 360px frame's 345 to 348px layout but not a true 360px viewport (spec 074, #318).
diff --git a/spec/support/narrow_frame.rb b/spec/support/narrow_frame.rb
index b9b9ac04..6345fe51 100644
--- a/spec/support/narrow_frame.rb
+++ b/spec/support/narrow_frame.rb
@@ -25,7 +25,10 @@ def open_in_narrow_frame(path, width:, ready:, height: 800)
   # Loads path in a frame whose viewport (its documentElement.clientWidth) is viewport px wide, the way a phone of that width is:
   # open_in_narrow_frame's width includes the frame's classic scrollbar, so a "360px" frame there lays a page out in 345px or 348px.
   # The frame is the viewport plus the scrollbar it draws, measured (about 15px on a Mac, 12px on the Linux runner) and reopened
-  # once if the first guess was wrong.
+  # once if the first guess was wrong. A page shorter than the frame has no scrollbar and gets a frame exactly viewport px wide.
+  #
+  # It does not raise: when the reopened page gains or loses its scrollbar the viewport it got differs, so the caller asserts the
+  # width it returns.
   #
   # @param path [String] the page to load, on the current origin
   # @param viewport [Integer] the width the page is laid out in, in px
diff --git a/spec/system/deck_page_spec.rb b/spec/system/deck_page_spec.rb
index 2aa55f2b..73f7aee1 100644
--- a/spec/system/deck_page_spec.rb
+++ b/spec/system/deck_page_spec.rb
@@ -1,7 +1,9 @@
 require "rails_helper"
 
 # Spec 066 Story 5, spec 068 AC-2.4, AC-2.5 and AC-2.11: the deck page at 360, 640, 768 and 1280px in both themes, in headless
-# Firefox. Phone widths use the narrow frame (a window can't go below 500px), whose page is a same-origin iframe.
+# Firefox. Phone widths use the narrow frame (a window can't go below 500px), whose page is a same-origin iframe. Two kinds of
+# 360px are in this file: the overflow and zone-head examples open a true 360px viewport (open_deck_page_at, #318), the structure
+# examples (headers, wrapping, button heights) a 360px frame, which lays out in about 345px with its classic scrollbar.
 RSpec.describe "Deck page", type: :system do
   let!(:user) { system_sign_in_as(create(:user)) }
   let(:account) { user.account }
@@ -67,7 +69,7 @@ def column_boxes
 
   # 360px is a phone's viewport (spec 074 measured the worst case there: the document does not scroll sideways), so its frame is
   # sized from the measured scrollbar. A "360px" narrow frame lays out in about 345px, where the worst-case row's table spills
-  # 10px past the page (#318: the old checks compared with innerWidth and could not see it). The wider widths are frames.
+  # 7 to 10px past the page, by platform (#318: the old checks compared with innerWidth and could not see it). The wider widths are frames.
   def open_deck_page_at(width)
     ready = ".c-zone:first-of-type table"
     return open_in_narrow_frame(deck_path(deck), width:, ready:) unless width == 360
diff --git a/spec/system/narrow_frame_spec.rb b/spec/system/narrow_frame_spec.rb
index 756b8e41..63b7f114 100644
--- a/spec/system/narrow_frame_spec.rb
+++ b/spec/system/narrow_frame_spec.rb
@@ -54,7 +54,7 @@ def overflow_frame_page(overflow)
   it "reports the same overflow for the page the driver is in", :aggregate_failures do
     open_sign_up_frame
     within_narrow_frame { expect(page_fits_sideways?).to be(true) }
-    overflow_frame_page(5)
+    expect(overflow_frame_page(5)["scrollbar"]).to be > 5 # under a scrollbar wider than the overflow, the case the old measure missed
     within_narrow_frame { expect(page_fits_sideways?).to be(false) }
   end
 end

From f4147e7063affd4ac9778cf674f33411200eb6b0 Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 08:41:06 -0500
Subject: [PATCH 14/15] docs(lessons): sweep a measurement trap by swapping the
 measure and running (#318)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 ...rap-by-swapping-and-running-not-by-grep.md | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 docs/lessons/2026-11-12-sweep-a-measurement-trap-by-swapping-and-running-not-by-grep.md

diff --git a/docs/lessons/2026-11-12-sweep-a-measurement-trap-by-swapping-and-running-not-by-grep.md b/docs/lessons/2026-11-12-sweep-a-measurement-trap-by-swapping-and-running-not-by-grep.md
new file mode 100644
index 00000000..e3900fc2
--- /dev/null
+++ b/docs/lessons/2026-11-12-sweep-a-measurement-trap-by-swapping-and-running-not-by-grep.md
@@ -0,0 +1,30 @@
+---
+date: 2026-11-12
+spec: none (direct fix, #318)
+tags: [system-specs, firefox, layout, narrow-frame, measurement]
+---
+
+# Lesson: sweep a measurement trap by swapping the measure and running, not by grep
+
+## Context
+
+#318: the narrow-frame helper compared `scrollWidth` with `innerWidth`, which includes the frame's classic scrollbar (15px on the Mac, about 12px on CI), so a page overflowing sideways by up to that much passed. Spec 072's review had named the trap on 2026-11-11 (`docs/lessons/2026-11-11-two-measurement-traps-the-classic-scrollbar-and-closed-details-menus.md`). The helper fix was four lines.
+
+## What happened
+
+- The helper's change alone left all 452 examples that use it green. The same trap was written 25 more times as inline `scrollWidth <= window.innerWidth` checks in 17 other specs, nine of them as a local `fits?` method each. A grep found those.
+- The first review round found them, and a second grep still missed two variants: `footer_spec` compared the footer text's right edge with `width - gutter`, where `width` is the frame's width and so includes the scrollbar, and `scanner_sitting_spec` compared `scrollWidth` with the literal 360. Neither contains `innerWidth`. The second round's reviewer found them by reading.
+- Swapping the measure to `clientWidth` and running was what found real findings: 5 examples failed, all at a "360px" narrow frame of the deck page. The cause was not a bug: a 360px frame with a 15px scrollbar lays a page out in 345px (348px on CI), and the zone table's worst-case row spills 7 to 10px past that, but not past a true 360px viewport (spec 074 recorded the spill and its limit). The examples had been passing because the scrollbar hid it, and "360px" meant two layouts in one file.
+- The honest fix was to say which 360px each example means: `open_in_viewport_frame` opens a frame as the viewport plus the measured scrollbar, and the two overflow examples use it. The helper is the one measure now (`page_fits_sideways?`), so the next check has nothing to copy.
+
+## What to do next time
+
+- To remove a measurement trap, put the correct measure in one helper first, then swap every use and run the files. Grep finds the copies that look like the trap; the run finds the ones that behave like it. A comparison against a frame's width, a viewport literal, or a width variable that includes a scrollbar is the same trap without its name.
+- When a stricter measure turns an example red, ask what viewport the name promises ("360px" is a phone's viewport, not a 360px frame) before touching the page.
+- Probe before asking for a scope ruling: a temporary `sed` over the files, one run and a `git checkout` took under four minutes for 17 files and let the question to the coordinator name the 5 failing examples and their cause.
+
+## Signals to watch for
+
+- `scrollWidth` or an element's `right` compared with `innerWidth`, a frame `width` parameter, or a number that is a frame's width.
+- A local `fits?` or `frame_fits?` defined in a spec: the measure belongs in `spec/support/narrow_frame.rb`.
+- An example named for a phone width that opens `open_in_narrow_frame(…, width: 360)` and checks overflow or an edge.

From ff8ddbfafe7b1f6c660d65c9751b8cc21bccbe26 Mon Sep 17 00:00:00 2001
From: James Thompson <james@thomps.onl>
Date: Thu, 12 Nov 2026 09:04:52 -0500
Subject: [PATCH 15/15] test(system): shape panel phone frames reuse
 open_in_viewport_frame (#318)

open_phone_frame and open_fold_in_frame repeated its scrollbar measuring; they
now call it and open the fold afterwards. Deferred until #330 (spec 078) merged,
as the PR said. deck_shape_panel_spec and deck_page_spec: 66 examples green.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 spec/system/deck_shape_panel_spec.rb | 41 ++++++++--------------------
 1 file changed, 11 insertions(+), 30 deletions(-)

diff --git a/spec/system/deck_shape_panel_spec.rb b/spec/system/deck_shape_panel_spec.rb
index a29948f1..bd8679f8 100644
--- a/spec/system/deck_shape_panel_spec.rb
+++ b/spec/system/deck_shape_panel_spec.rb
@@ -110,23 +110,13 @@ def open_fold_fit
     JS
   end
 
-  # Opens the deck page in a frame whose viewport (the page's `documentElement.clientWidth`, the frame less its classic scrollbar) is
-  # 360px, with the fold open, and returns that viewport's width so the example can assert it. The scrollbar's width depends on the
-  # platform (15px on the Mac, about 12px on the Linux CI runner, found when CI measured an inside of 281px where the Mac measured
-  # 278px), so the frame is sized from the measured scrollbar, `360 + scrollbar`, and never from a constant: it opens at 375px, the
-  # Mac's answer, and reopens only when the scrollbar isn't 15px.
+  # Opens the deck page in a frame whose viewport is 360px (open_in_viewport_frame sizes it from the measured scrollbar: 15px on the Mac,
+  # about 12px on the Linux CI runner, found when CI measured an inside of 281px where the Mac measured 278px), with the fold open, and
+  # returns that viewport's width so the example can assert it.
   def open_phone_frame
-    width = 375
-    2.times do
-      open_in_narrow_frame(deck_path(deck), width:, ready: "details.c-shapefold")
-      within_narrow_frame do
-        page.execute_script('document.querySelector("details.c-shapefold").open = true')
-        scrollbar = page.evaluate_script("window.innerWidth - document.documentElement.clientWidth")
-        width = 360 + scrollbar
-      end
-      break if width == 375
-    end
-    within_narrow_frame { page.evaluate_script("document.documentElement.clientWidth") }
+    viewport = open_in_viewport_frame(deck_path(deck), viewport: 360, ready: "details.c-shapefold")
+    within_narrow_frame { page.execute_script('document.querySelector("details.c-shapefold").open = true') }
+    viewport
   end
 
   # A phone's 360px viewport has no scrollbar and the frame keeps a classic one, so the frame is 360px plus the measured scrollbar
@@ -203,21 +193,12 @@ def fold_panel = "details.c-shapefold .c-shape"
     def open_fold = page.execute_script('document.querySelector("details.c-shapefold").open = true')
     def inject_css(rules) = page.execute_script("const style = document.createElement('style'); style.textContent = #{rules.to_json}; document.head.append(style)")
 
-    # A frame whose viewport is `viewport` px wide with the fold open: the viewport plus the scrollbar the frame draws (measured, then
-    # the frame is reopened if it was not 15px). Returns the viewport it got, for the example to assert.
+    # A frame whose viewport is `viewport` px wide (open_in_viewport_frame) with the fold open. Returns the viewport it got, for the
+    # example to assert.
     def open_fold_in_frame(path, viewport)
-      width = viewport + 15
-      2.times do
-        open_in_narrow_frame(path, width:, ready: "details.c-shapefold")
-        scrollbar = within_narrow_frame do
-          open_fold
-          page.evaluate_script("window.innerWidth - document.documentElement.clientWidth")
-        end
-        break if viewport + scrollbar == width
-
-        width = viewport + scrollbar
-      end
-      within_narrow_frame { page.evaluate_script("document.documentElement.clientWidth") }
+      got = open_in_viewport_frame(path, viewport:, ready: "details.c-shapefold")
+      within_narrow_frame { open_fold }
+      got
     end
 
     # Opens the deck page as `width` says (a viewport in px, a fixed frame, or :aside at 1280px) and yields the panel's selector, inside