fix(web): give the chain three rows to be read in

Its floor was a row and a half, which is what a finished game left it:
the panel and the lobby took the column and the transcript became a
sliver with the top card sliced. A row and a half of history is not
history.

Three rows now, and the page grows past the window rather than taking a
fourth off the list. To pay for them the compact room code under a
result is a line instead of a card — its border and padding were 30px
of the same screen, and the code and its copy button are all that line
was ever carrying.

Measured with two players in a room, board and chat side by side: in a
game the chain shows every word played at 1080, 900 and 768 tall. After
one, 1080 still shows them all with nothing scrolling, and a shorter
window keeps its three rows and scrolls for the rest. Four seats, a
loser's suggestions and a full lobby come to 989 against 979 — ten
pixels, where before these two changes it was 300.
This commit is contained in:
tiennm99 committed 2026-09-10 15:46:59 +07:00
1 parent aec9d4ad6f
commit dd3b46397f
2 files changed
+17 -6

No files matched your search

+9 -3
View File
@@ -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
+8 -3
View File
@@ -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 {