From dd3b46397f19cfec579e8fd7501aa5f431dcc71c Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Thu, 10 Sep 2026 15:46:59 +0700
Subject: [PATCH] fix(web): give the chain three rows to be read in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 web/src/lib/components/ChainHistory.svelte  | 12 +++++++++---
 web/src/lib/components/RoomCodePanel.svelte | 11 ++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

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 {