diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte index bef894a..d474bf1 100644 --- a/packages/web/src/App.svelte +++ b/packages/web/src/App.svelte @@ -3047,15 +3047,17 @@ * Phones keep the bottom hand; the one-column flow re-orders anyway. */ @media (min-width: 901px) { .game.hand-left { - grid-template-columns: minmax(9.6rem, 10.4rem) minmax(340px, 1fr) minmax(250px, 330px); + grid-template-columns: minmax(17.4rem, 18.2rem) minmax(340px, 1fr) minmax(250px, 330px); } .game.hand-left .table-edge { display: contents; } .game.hand-left .table-edge > * { grid-column: 2; min-width: 0; } .game.hand-left .table-edge > .hand { grid-column: 1; grid-row: 1 / span 6; - flex-direction: column; - align-items: center; + display: grid; + grid-template-columns: repeat(2, 8.2rem); + justify-content: center; + align-content: start; align-self: start; position: sticky; top: 0.5rem; @@ -3066,6 +3068,9 @@ } .game.hand-left .board-zone { grid-column: 2; grid-row: 1; } .game.hand-left .paper-rail { grid-column: 3; grid-row: 1; } + /* With the hand out of the bottom strip, the map claims the height. */ + .game.hand-left .board-viewport { height: calc(100dvh - 11rem); } + .game.hand-left .fpv-primary .board-viewport { height: 30dvh; } } /* The first-person pane wears exactly the board's width, right above * it: the stack shrink-wraps to the board, and width:0 + min-width