fix(queen): the kanban showed no card on a phone

[gHashTag]

What the owner saw

app.t27.ai/game/kanban on a phone: the BLOCKED and RUNNING columns showed only their headers. No card could be read.

Why

• The shell rule .queen27-page.is-shell .queen27-kanban { grid-template-columns: repeat(6, minmax(160px, 1fr)) } (specificity 0,2,0) beat the phone rule's minmax(78vw, 1fr) (0,1,0).
• Every column was 160px, so a card was 126px wide and 204px tall in a 67px box.
• The chrome around the board took 470 of the frame's 693px:
  • a row holding only the word "Direction";
  • a row for an identity notice with no control in it;
  • a 64px top bar.

Change

All of it is in apps/website/src/pages/queen-phone.css, sections 7–11, phone portrait only:

1. One column per screen, with the next one peeking in by 28px. scroll-snap stops a swipe on a column. The chrome still does not scroll sideways; only the board does, and it did before.
2. A card shows two lines of 12.8px title and a one-line footer.
3. The "Direction" label row and the off-site / web-only identity notice are hidden. Neither has a control.
4. The top bar is 48px. The tool row folds into the title line, and the identity chip sits there.

Measured

In the live app frame at 392x693, with the board's real data:

	before	after
cards' box	67px	184px
card height	204px	93px
readable cards per column	0	2
hud-top height	64px	48px
head height	156px	137px
direction filter height	86px	60px

• Document width stays 392, so no sideways overflow.
• MENU and the rail tiles stay 44px.
• A 200px swipe snaps to the next column.

Shipping

The 999 app pins this page by QUEEN_REF in apps/vibee-editor/Dockerfile. A follow-up 999 PR bumps it after this merges.

{
  "version": 1,
  "head_sha": "302e94cb851f805d0198cb1c3c874c363fe2684b",
  "summary": "On a phone the board's kanban now shows one readable column at a time with two cards in view, where the owner's screenshot showed column headers and no card at all.",
  "changes": [
    "queen-phone.css section 7: in phone portrait each kanban column is the board's width less 28px, with scroll snap, so the next column peeks in and a swipe stops on a column.",
    "Sections 8-9: a card is a wrapped flex row with a two-line 12.8px title and a one-line footer; the column's meaning line is one line instead of a 50px block.",
    "Section 10: the Direction label row and the off-site or web-only identity notice, neither of which holds a control, are hidden on a phone.",
    "Section 11: the top bar is 48px using the same selector that pins it to 64px, and the tool row folds into the title line where the identity chip sits."
  ],
  "tests": [
    {
      "command": "npx vite build in apps/website",
      "status": "passed",
      "result": "The website bundle builds with the new rules, exit code 0.",
      "evidence": "Run locally on macOS before the commit at this head"
    },
    {
      "command": "CHROME_PATH=BrowserOS node qa/queen-viewport-contract.mjs --no-build",
      "status": "passed",
      "result": "Queen viewport contract PASS on 6 sizes including 390x844; it checks the wars view only, not the kanban.",
      "evidence": "Run locally against the dist built from this head, screenshots in /tmp/hud-shots"
    },
    {
      "command": "Inject sections 7-11 as a style element into the live app.t27.ai/game/kanban frame at 392x750 and measure with getBoundingClientRect",
      "status": "passed",
      "result": "Cards box 67px to 184px, card 204px to 93px tall, two cards visible where none were, document width 392, MENU and rail tiles 44px, a 200px swipe snaps to the next column.",
      "evidence": "Live board data in the Claude browser pane, rules byte-identical to this head's media block"
    }
  ],
  "limitations": [
    "The viewport contract does not cover the kanban view; the kanban numbers come from a live injection, not a CI gate.",
    "The app frame shows the off-site identity notice inside app.t27.ai itself, which may be a logic bug in QueenIdentity; this change only hides it on a phone.",
    "app.t27.ai serves this only after 999 bumps QUEEN_REF in apps/vibee-editor/Dockerfile to the merge commit."
  ],
  "tags": [
    "Frontend",
    "Mobile",
    "UX"
  ],
  "blog": {
    "title": "The phone kanban that showed no card",
    "summary": "A 160px shell rule outranked the phone rule, so the board's kanban on a phone was six slivers with no readable card; one column per screen and lighter chrome bring two cards into view.",
    "outline": [
      "What the owner's screenshot showed: column headers, counts of 82 and 5, and not a single card, under 470px of chrome.",
      "Why the phone rule never applied: a shell selector at specificity 0,2,0 beat the 78vw phone rule at 0,1,0, leaving 160px columns.",
      "The fix measured in the live frame: one column per screen with a visible peek and snap, compact cards, and rows without controls removed."
    ]
  }
}

🤖 Generated with Claude Code