fix(website): one scroller on the phone spec page, the pane itself

[dmitrii-f-t27]

What

The "Explorer viewport contract" step of website-checks.yml has been red on main since #1019 (2026-09-15): 390x844 specs FAIL 2 live vertical scrollers for 1 pane(s): main.- 792/1232, details.spec-x-brief 380/552 (run 35009106631 on fe4d5ed; the same line on every website PR since, #1032 and #1033 included).

#1019 capped an open .spec-x-brief at 45vh with overflow: auto so that, in a fixed column, the brief could not collapse onto the tab strip and the code kept their height. That is the desktop's problem. On a phone the detail pane is the one document that scrolls (SpecExplorer.tsx: main with overflow-y: auto, the layer body asking for 70vh instead of competing), so the capped brief is a second live scroller inside the first — exactly what specs/ui/viewport.t27 forbids with ONE_SCROLLER_PER_PANE.

One rule in src/styles/explorer-viewport.css, phone tier only: the open brief takes its height (max-height: none; overflow: visible) and the pane scrolls past it. Tablet, desktop and wide keep #1019 unchanged.

Checks

• npx vite build, then node qa/explorer-viewport-contract.mjs --no-build: PASS (6 sizes × 7 explorers); at 390x844 every explorer reports scrollers=1, specs included (was the one FAIL).
• Nothing else touched; the Queen and the other explorers do not use .spec-x-brief on the phone tier differently.

Once this is on main, the checks job of #1032 and #1033 goes green on a rebase (their only failing step is this one).

Do not merge without the owner's approval.

Work report

{
  "version": 1,
  "head_sha": "4c8343323bb80afddb769bdc9a66551ea021c30d",
  "summary": "Restores one scroller per pane on the phone spec page: on the phone tier an open .spec-x-brief drops its 45vh cap and overflow so the detail pane itself scrolls, which is what specs/ui/viewport.t27 requires with ONE_SCROLLER_PER_PANE.",
  "changes": [
    "apps/website/src/styles/explorer-viewport.css: one additional rule for the phone tier removes max-height and overflow from an open .spec-x-brief, leaving the detail pane as the single live vertical scroller."
  ],
  "tests": [
    {
      "command": "node qa/explorer-viewport-contract.mjs --no-build",
      "result": "PASS for all 6 by 7 viewport and pane combinations; 390x844 specs reports scrollers=1",
      "status": "passed",
      "evidence": "Local run 2026-09-16 on commit 4c834332 over origin/main fe4d5edc; the same contract fails on main since #1019 with two live scrollers (main and details.spec-x-brief)"
    }
  ],
  "limitations": [
    "Desktop keeps the #1019 behaviour (45vh cap with overflow auto on an open brief); only the phone tier changes.",
    "Not verified on a physical phone; the contract run uses headless Chrome device emulation.",
    "Website-checks on #1032 and #1033 stay red on the Explorer viewport contract step until this fix is merged and those branches are rebased."
  ],
  "tags": [
    "explorer",
    "viewport",
    "mobile",
    "website"
  ],
  "blog": {
    "title": "One scroller on the phone spec page, the pane itself",
    "summary": "How a desktop-oriented cap on the spec brief became a second scroller on phones, why the viewport spec forbids exactly that, and the one-rule fix that made the explorer viewport contract pass again.",
    "outline": [
      "Since #1019 the Explorer viewport contract step of website-checks has been red on main: at 390 by 844 the specs page had two live vertical scrollers, the main pane and the open brief capped at 45vh with overflow auto.",
      "The cap solved a desktop problem, where a brief in a fixed column could collapse onto the tab strip, but on a phone the detail pane is already the one document that scrolls, so a capped brief inside it violates the ONE_SCROLLER_PER_PANE rule in specs/ui/viewport.t27.",
      "The fix is a single phone-tier rule that lets an open brief grow to its content and hands scrolling back to the pane; the contract passes for all forty-two viewport and pane combinations, and the red step on the two sibling pull requests clears once they are rebased on this change."
    ]
  }
}

🤖 Generated with Claude Code