feat(queen): phone portrait layout for the shell and the shared comb - #981
Open
gHashTag wants to merge 1 commit into
Open
feat(queen): phone portrait layout for the shell and the shared comb#981gHashTag wants to merge 1 commit into
gHashTag wants to merge 1 commit into
Conversation
Measured on a 390x844 viewport from the owner's screenshot of t27.ai/#/queen (2026-09-10): the head took 166px in two rows, the body padding pushed the field to y=378, the law strip cut the map in the middle, five 90x50 region labels covered each other's portals and the footer tabs stood 84px tall. queen-phone.css (one media block, max-width 640 and min-height 501, so no desktop or landscape rule changes): - head 166 -> 110px: one-row tools with horizontal scroll, no wrap - body padding-top 124 -> 8px: the desktop rule at Queen.css ~4454 beat the phone rule at ~4347 in the cascade; this file loads after Queen.css - law strip + Find cells move under the field (layer rows 1fr auto) - field and labels layer are absolute inside the embedded comb: the fixed full-window field centred the scene under the head; labels share the canvas origin because projections are canvas-relative - region labels 90x50 -> ~85x40 (two lines, 0.68rem, no 44px floor) - footer 84 -> 64px, command tiles 56px QueenCombBabylon fit(): label allowance 160x110 -> 80x64 when the host is narrower than 641px; on a 358px field the old allowance left ~180px for the comb, now ~250px. Verified on a production build served at 390x844: head 110, field 358x494, toolbar at y=700 (h56), footer 64, labels 40px tall, search-open state shrinks the field to 395px and keeps the map visible. Kanban, Specs and Mission views checked for regressions; the Specs explorer overlap inside its own iframe is pre-existing and untouched. Checks: typecheck ratchet 179/179 baseline, eslint clean on touched files, qa/queen-responsive.mjs PASS, vite build OK.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Phone-portrait layout for the queen shell and the shared comb (
t27.ai/#/queen), driven by the owner's screenshot of the page on a phone (2026-09-10, 390×844).Measured before → after (390×844, production build)
.queen27-hud-vp-headheight.queen27-hud-vp-bodypadding-top.queen27-comb-field)Search-open state: field shrinks to 395px, map stays visible.
How
src/pages/queen-phone.css, one media block(max-width: 640px) and (min-height: 501px): no desktop or landscape rule changes.Queen.cssinQueen.tsxand after theQueen.cssimport inQueenCatalogHive.css, so at equal specificity it wins. Root cause documented in the file header: the desktop padding rule atQueen.css~4454 beat the ≤900px phone rule at ~4347.absoluteinside the embedded comb: the fixed full-window field centred the scene on the window (under the head); the labels layer must share the canvas origin because projections are canvas-relative.QueenCombBabylon.fit(): label allowance 160×110 → 80×64 when the host is narrower than 641px (comment in code).Checks
node scripts/typecheck-ratchet.mjs: 179 errors / 26 files, baseline 179 / 26, no file gained errorseslinton touched files: cleanqa/queen-responsive.mjs: PASSvite build: OK; verified visually on the built bundle at 390×844 (comb, search-open, kanban, specs, mission)Not in this PR
wasm/trinity-canvas.jsuntouched.Related: gHashTag/999-multibots-telegraf#2324 (the Mini App «Улей» tab embeds this page whole).