fix(website): the Queen's phone chrome keeps every icon in view

[dmitrii-f-t27]

The picture

The owner opened https://t27.ai/#/queen on a phone (2026-09-16) and sent the screen: in the map's head the tool row stopped at ⟲, with the identity chip half cut and INTEL FEED and FULLSCREEN not there at all; the footer rail showed six and a half of its thirteen tiles; the CONTEXT chip stood on the first two of them. Both rows were designed on 2026-09-10 to scroll sideways (queen-phone.css §1, Queen.css .is-compact), and a row gives no sign that it can be dragged: a control past the edge did not exist for the person holding the phone.

What changes

All of it in apps/website/src/pages/queen-phone.css, inside the existing portrait-phone gate (max-width: 640px and orientation: portrait), plus one custom property in QueenCommand.tsx. Desktop, tablet and landscape rules are untouched.

1. The head's tools wrap instead of scrolling: two rows, measured at 360, 375 and 390 wide (six tiles, then four and the identity chip). The identity chip goes last and asks for 6rem, so it packs after the second row's four tiles and grows to the row's end, never past its 8.5rem — at 390x844 it is the same 136px qa/queen-identity-contract.mjs measures. The one link among the buttons (◇, the shared core) is a 44px tile like its neighbours, not a 25x26 box at the row's top edge. The repository select takes min(200px, 100% - 160px) instead of 150px, so "ALL REPOSITORIES · SHARED CORE" is no longer cut mid-word while the + and SHARED CORE still fit the same line.
2. The rail is a grid of two rows, every view in sight: the column count is the rail's own (--queen-phone-cols, half the views rounded up, set by QueenCommand.tsx next to --queen-tile-rows), every tile one cell of at least 44px, icon only, the SPECS tile no wider than the others. Nothing scrolls and nothing is cut. The rail is 98px instead of 64.
3. What stood above the rail follows its height through one number, --hud-phone-rail-h: the body's bottom padding, the CONTEXT chip, the context drawer and the identity prompt (.queen27-identity-bridge) were placed for a 64px rail.

Measured (headless Chrome, mobile metrics, dist/ of this branch)

viewport	head tools	rail	edge
375x812 comb	2 rows: ⬢ FIT VIEW − + ⌘ ◇ / # ⟲ ◉ ⛶ + chip 135px	7x2, 13/13 tiles 46x44 inside the rail, scrollWidth == clientWidth	nothing crosses the viewport
375x812 specs	2 rows: ⌘ ◇ # ⟲ ◉ ⛶ / chip	same	CONTEXT chip at y=660..690, rail from 698
390x844 comb, specs	same, chip 136px	7x2, tiles 48x44	nothing crosses
360x740 comb	2 rows, chip 134px	7x2, tiles 44x44	nothing crosses
390x700 specs (Telegram-sized)	2 rows	7x2	nothing crosses

Before: at 375x812 the tools row ran to x=649 and the rail to x=675; the CONTEXT chip sat at y=758..788 over tiles at y=737..793.

Checks

• npx tsc --noEmit, npx vite build, npm run check:viewport, npm run check:queen-responsive: exit 0.
• qa/queen-viewport-contract.mjs, run on origin/main @ fe4d5ed and on this branch in the same session: main fails 30 size/view combinations, this branch 26. The four that turn green are 390x844 kanban, map, factory and research, each failing on main with UNDECLARED SCROLLER .queen27-hud-vp-tools — the sideways tool row the picture shows — and passing here (no undeclared scroller, nothing past the viewport edge). The other 26 (every desktop size; 390x844 comb with views=0) fail with the same lines on both sides and mention neither the head, the rail nor the chip.
• qa/queen-touch-contract.mjs: "page never became ready — board or comb missing" on this branch and on main alike (it waits for the classic board).
• qa/queen-windows-contract.mjs: 9 problems, all at desktop sizes, the same 9 on main; ru and en 390x844 report "every window whole".
• qa/queen-identity-contract.mjs --no-build: 20/20 (step 12 at 390x844 measured the chip at 136x44 before and after "Sign in" came — an earlier draft of this change let the chip take its content height when alone in a row, 24px then 28px, and the contract caught it).
• qa/queen-idle-layout-contract.mjs 26 checks, qa/queen-tri-contract.mjs 21/21, and the website-checks.yml gates that read the built page: check:render --no-build and check:queen-idle exit 0.
• check:explorer-viewport --no-build fails one combination, 390x844 specs: 2 live vertical scrollers ... details.spec-x-brief 380/552 — the same line the "Explorer viewport contract" step fails with on main's own run of website-checks.yml for fe4d5ed (run 35009106631). That contract opens the Explorer routes only, never #/queen, and this change touches neither them nor index.css.

Not changed, and a follow-up

• specs/ui/viewport.t27 (t27) still describes the 2026-09-10 rail at 390x844 as "a horizontal strip, 12 tiles of 44x74, about 6 visible" in its comments (RAIL_* are "described, not changed"). The constants and their tests stay true for the 641–900px strip; the prose about the portrait phone will be corrected in a small t27 PR so the vendored copy can follow.
• The Spec Explorer's tab strip already wraps (SpecExplorer.tsx "layer tabs") and its ABOUT THIS SPEC box no longer draws over it (index.css .spec-x-brief); what the picture shows there is the deployed build, not main.

Do not merge without the owner's approval.

Work report

{
  "version": 1,
  "head_sha": "07abe3ae673e2c9a2ceacfe42eeadf6f126cb254",
  "summary": "On a portrait phone the Queen board's head tools and footer rail no longer scroll sideways: the tools wrap onto a second row, the rail becomes a grid of two rows with all thirteen tiles in view, and the identity chip keeps a 44 px touch height.",
  "changes": [
    "apps/website/src/pages/queen-phone.css: on the portrait tier (max-width 640px) the head tool row wraps instead of scrolling; the identity chip goes last with flex 1 1 6rem, max-width 8.5rem and min-height 44px; the repository select is capped at min(200px, calc(100% - 160px)).",
    "The footer rail becomes a two-row grid of ceil(views/2) columns, icon-only, 98 px tall (--hud-phone-rail-h); the body padding, the CONTEXT chip, the context drawer and .queen27-identity-bridge derive their offsets from that height.",
    "apps/website/src/components/QueenCommand.tsx: sets the --queen-phone-cols CSS variable from the view list, so the rail derives its column count from the items instead of a hard-coded number."
  ],
  "tests": [
    {
      "command": "npm run typecheck && npm run build",
      "result": "TypeScript and the Vite build complete without diagnostics",
      "status": "passed",
      "evidence": "Local run on 2026-09-16 in the fix/queen-mobile-hud worktree over origin/main fe4d5edc"
    },
    {
      "command": "npm run check:viewport && npm run check:queen-responsive && npm run check:render && npm run check:queen-idle && npm run check:tri",
      "result": "All five gates green, check:tri reports 21 of 21",
      "status": "passed",
      "evidence": "Local run 2026-09-16; qa/queen-identity-contract.mjs 20 of 20 and qa/queen-idle-layout-contract.mjs 26 checks also green"
    },
    {
      "command": "node qa/queen-viewport-contract.mjs",
      "result": "26 failing combinations on this branch against 30 on main; the four 390x844 cases (kanban, map, factory, research) that reported the undeclared scroller .queen27-hud-vp-tools now pass",
      "status": "failed",
      "evidence": "The remaining 26 are desktop combinations and the 390 comb views=0 case, identical on main fe4d5edc"
    },
    {
      "command": "node shot.mjs (local CDP script driving headless Chrome) at 360x740, 375x812, 390x844 and 390x700",
      "result": "No control outside the viewport and 13 of 13 rail tiles visible at every size",
      "status": "passed",
      "evidence": "Before and after screenshots captured on 2026-09-16 against the local dev server"
    }
  ],
  "limitations": [
    "Not yet checked on a physical iPhone; every measurement comes from headless Chrome device emulation.",
    "qa/queen-viewport-contract.mjs still reports 26 failures that also fail on main (desktop combinations and the 390 comb views=0 case); this PR does not address them.",
    "The Explorer viewport contract step of website-checks has been red on main since #1019 and turns green here only after #1034 is merged and this branch is rebased.",
    "check:queen-touch and check:queen-windows fail on main as well and are untouched."
  ],
  "tags": [
    "queen",
    "mobile",
    "viewport",
    "website"
  ],
  "blog": {
    "title": "The Queen's phone chrome keeps every icon in view",
    "summary": "Why the Queen board's head tools and rail on a portrait phone now wrap into rows instead of scrolling sideways, what it cost in pixels, and how headless Chrome measured the result at four phone sizes.",
    "outline": [
      "A phone screenshot from the owner showed the head tool row stopping at the reload glyph, the identity chip half cut, and only six and a half of thirteen rail tiles, because both rows were designed to scroll sideways and a scrolling row gives no visual sign that more controls exist past the edge.",
      "The fix trades height for visibility: the tool row wraps onto a second line, the footer rail becomes a grid of two rows whose column count is derived from the view list, and the identity chip keeps a forty-four pixel touch target, adding about forty-eight pixels to the head and thirty-four to the rail.",
      "Verification ran through the existing website gates plus a CDP script driving headless Chrome at four phone viewports; the four 390 by 844 combinations that failed the viewport contract on main because of an undeclared scroller now pass, while the desktop failures already present on main remain out of scope."
    ]
  }
}

🤖 Generated with Claude Code