From 0927836e7e7de4548a4108537bb774cfc09a5e2b Mon Sep 17 00:00:00 2001 From: Eric Wagoner Date: Sun, 16 Aug 2026 01:00:23 -0400 Subject: [PATCH] Mobile pass: hand above the paperwork, dvh sizing, tight masthead At phone width the layout now flows board -> actions -> your hand -> turn slip -> score sheet -> chronicle, instead of burying the cards beneath the paperwork below the fold. The board caps at 56dvh (dvh throughout, for iOS's shifting address bar), the chronicle stops hogging height, and the masthead holds one line. The hand is a thumb-swipeable card row; pinch-zoom stays enabled for reading fine card text. Co-Authored-By: Claude Fable 5 --- packages/web/src/App.svelte | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte index 05463e2..70c4f4e 100644 --- a/packages/web/src/App.svelte +++ b/packages/web/src/App.svelte @@ -1075,7 +1075,7 @@ } .board-zone { display: flex; align-items: flex-start; justify-content: center; min-width: 0; } .board-zone :global(svg.board) { - max-height: calc(100vh - 21.5rem); + max-height: calc(100dvh - 21.5rem); width: auto; max-width: 100%; } @@ -1207,8 +1207,20 @@ } @media (max-width: 900px) { - .game { grid-template-columns: 1fr; } - .paper-rail { order: 2; } - .chronicle { max-height: 22vh; } + /* One-column phone flow: board, then your controls and hand, THEN the + paperwork — cards must never hide below the chronicle. */ + .game { display: contents; } + .board-zone { order: 1; } + .table-edge { order: 2; margin-top: 0.6rem; } + .paper-rail { order: 3; margin-top: 0.9rem; } + .board-zone :global(svg.board) { + max-height: 56dvh; + } + .chronicle { max-height: 30dvh; flex: initial; } + .masthead { gap: 0.45rem; padding-top: 0.5rem; } + .mast-title { font-size: 1.05rem; white-space: nowrap; } + .mast-sub { display: none; } + .mast-leave { font-size: 0.72rem; } + .hand { min-height: auto; } }