discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

my-sea portrait form-col split: SPREAD field + action btns LEFT, DECKS RIGHT — fits the form on a phone-portrait viewport without DECKS pushing the AUTO DRAW / DEL row off-screen. CSS grid w. display: contents on .sea-form-main flattens the intermediate wrapper so its children participate directly in the grid

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-20 11:58:41 -04:00
parent 191dad5365
commit 4963237420
1 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/static_src/scss/_gameboard.scss
View File

@@ -489,6 +489,36 @@ body.page-gameboard {
flex: 0 0 16rem; flex: 0 0 16rem;
max-width: 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 // Portal the SPREAD dropdown out of `.sea-form-main`'s overflow
// clip — by default the gameroom's `.sea-form-main { overflow-y: // clip — by default the gameroom's `.sea-form-main { overflow-y:
// auto }` (from _card-deck.scss:1424) keeps the modal contents // auto }` (from _card-deck.scss:1424) keeps the modal contents