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

my-sea portrait form-col grid fix: chain .sea-form-col.my-sea-form-col so the 2-class selector beats _card-deck.scss's base .sea-form-col { display: flex } regardless of source order (card-deck loads AFTER gameboard in core.scss, so the prior 1-class selector lost to source order and the grid never took effect)

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

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

@@ -489,6 +489,18 @@ body.page-gameboard {
flex: 0 0 16rem; flex: 0 0 16rem;
max-width: 16rem; max-width: 16rem;
// 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
// scrollable, but for my-sea's much shorter form the dropdown gets
// clipped instead of overlaying the LOCK HAND / DEL btns below.
// Setting overflow visible here lets the absolute-positioned
// `.sea-select-list` extend past the form area + sit "above
// everything else" via its existing z-index: 100.
.sea-form-main {
overflow: visible;
}
// Portrait — split the form into two columns. LEFT carries the // Portrait — split the form into two columns. LEFT carries the
// SPREAD field (label + reversal hint + combobox) above the action // SPREAD field (label + reversal hint + combobox) above the action
// btns (AUTO DRAW / GATE VIEW + DEL); RIGHT carries the DECKS // btns (AUTO DRAW / GATE VIEW + DEL); RIGHT carries the DECKS
@@ -498,8 +510,16 @@ body.page-gameboard {
// the action btns + everything below the fold (user-spec // the action btns + everything below the fold (user-spec
// 2026-05-21). `.sea-form-main` uses `display: contents` so its // 2026-05-21). `.sea-form-main` uses `display: contents` so its
// `.sea-field` + `.sea-stacks` children act as direct grid items of // `.sea-field` + `.sea-stacks` children act as direct grid items of
// `.my-sea-form-col` despite the intermediate wrapper in the DOM. // the form col despite the intermediate wrapper in the DOM.
//
// Selector chains `.sea-form-col.my-sea-form-col` to win against
// `_card-deck.scss`'s base `.sea-form-col { display: flex; flex-
// direction: column }` (same 1-class specificity; card-deck loads
// AFTER gameboard in `core.scss`, so source order would otherwise
// overrule my-sea's grid). Chained 2-class selector pulls
// specificity ahead regardless of source order.
@media (orientation: portrait) { @media (orientation: portrait) {
&.sea-form-col {
flex: 0 0 auto; flex: 0 0 auto;
max-width: none; max-width: none;
width: 100%; width: 100%;
@@ -518,17 +538,6 @@ body.page-gameboard {
.sea-stacks { grid-area: stacks; margin: 0; justify-content: center; } .sea-stacks { grid-area: stacks; margin: 0; justify-content: center; }
.sea-form-actions { grid-area: actions; align-self: end; padding-top: 0; } .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
// scrollable, but for my-sea's much shorter form the dropdown gets
// clipped instead of overlaying the LOCK HAND / DEL btns below.
// Setting overflow visible here lets the absolute-positioned
// `.sea-select-list` extend past the form area + sit "above
// everything else" via its existing z-index: 100.
.sea-form-main {
overflow: visible;
} }
// Bump the dropdown z-index well above the picker's stacking ints // Bump the dropdown z-index well above the picker's stacking ints