From 496323742051cb38c0031b81fdd7e492a2bee129 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Wed, 20 May 2026 11:58:41 -0400 Subject: [PATCH] =?UTF-8?q?my-sea=20portrait=20form-col=20split:=20SPREAD?= =?UTF-8?q?=20field=20+=20action=20btns=20LEFT,=20DECKS=20RIGHT=20?= =?UTF-8?q?=E2=80=94=20fits=20the=20form=20on=20a=20phone-portrait=20viewp?= =?UTF-8?q?ort=20without=20DECKS=20pushing=20the=20AUTO=20DRAW=20/=20DEL?= =?UTF-8?q?=20row=20off-screen.=20CSS=20grid=20w.=20`display:=20contents`?= =?UTF-8?q?=20on=20`.sea-form-main`=20flattens=20the=20intermediate=20wrap?= =?UTF-8?q?per=20so=20its=20children=20participate=20directly=20in=20the?= =?UTF-8?q?=20grid?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.7 (1M context) --- src/static_src/scss/_gameboard.scss | 30 +++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss index 087041a..22f8a49 100644 --- a/src/static_src/scss/_gameboard.scss +++ b/src/static_src/scss/_gameboard.scss @@ -489,6 +489,36 @@ body.page-gameboard { flex: 0 0 16rem; max-width: 16rem; + // Portrait — split the form into two columns. LEFT carries the + // SPREAD field (label + reversal hint + combobox) above the action + // btns (AUTO DRAW / GATE VIEW + DEL); RIGHT carries the DECKS + // section (label + GRAVITY/LEVITY stacks) spanning both rows. + // Without this rearrange, on a phone-portrait viewport the stacked + // form col runs off the bottom of the viewport — DECKS lives above + // the action btns + everything below the fold (user-spec + // 2026-05-21). `.sea-form-main` uses `display: contents` so its + // `.sea-field` + `.sea-stacks` children act as direct grid items of + // `.my-sea-form-col` despite the intermediate wrapper in the DOM. + @media (orientation: portrait) { + flex: 0 0 auto; + max-width: none; + width: 100%; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: + "field stacks" + "actions stacks"; + column-gap: 1rem; + row-gap: 0.5rem; + align-items: start; + + .sea-form-main { display: contents; } + .sea-field { grid-area: field; margin-bottom: 0; } + .sea-stacks { grid-area: stacks; margin: 0; justify-content: center; } + .sea-form-actions { grid-area: actions; align-self: end; padding-top: 0; } + } + // Portal the SPREAD dropdown out of `.sea-form-main`'s overflow // clip — by default the gameroom's `.sea-form-main { overflow-y: // auto }` (from _card-deck.scss:1424) keeps the modal contents