diff --git a/web/src/lib/components/ChainHistory.svelte b/web/src/lib/components/ChainHistory.svelte index 8323fef..b193eb7 100644 --- a/web/src/lib/components/ChainHistory.svelte +++ b/web/src/lib/components/ChainHistory.svelte @@ -163,9 +163,15 @@ padding: 0; /* overflow-y sets a flex item's automatic minimum size to 0, and the shell is pinned at exactly 100dvh — so on a short viewport, which is - what an open keyboard leaves, the list would shrink to nothing with no - page scroll to recover it. A floor makes the page grow instead. */ - min-height: 4.5rem; + what an open keyboard or a finished game's panel leaves, the list + would shrink to nothing with no page scroll to recover it. A floor + makes the page grow instead. + + Three rows of it: at a row and a half the chain was a sliver you + could not read the history in, and the whole point of it is reading + back what has been played. Anything above this is space the board + had going spare. */ + min-height: 9rem; overflow-y: auto; list-style: none; /* Rows settle whole rather than half in and half out of view: the diff --git a/web/src/lib/components/RoomCodePanel.svelte b/web/src/lib/components/RoomCodePanel.svelte index 109e17f..00f209c 100644 --- a/web/src/lib/components/RoomCodePanel.svelte +++ b/web/src/lib/components/RoomCodePanel.svelte @@ -119,13 +119,18 @@ } /* One line under a finished game: the code, and the one button that matters - when somebody has to be invited into the next one. */ + when somebody has to be invited into the next one. A line rather than a + card — the card's border and padding were 30px of a screen that also has + the result, the seats, the buttons and the chain to fit. */ .panel.compact { flex-direction: row; justify-content: center; flex-wrap: wrap; + align-items: center; gap: var(--space-3); - padding: 10px var(--space-3); + padding: 0; + border: 0; + background: none; } .label { @@ -148,7 +153,7 @@ } .panel.compact .code { - font-size: var(--text-8); + font-size: var(--text-7); } .actions {