From f49b906519228464e5cded8aa663295158ef0de1 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Wed, 9 Sep 2026 00:36:04 +0700
Subject: [PATCH] fix(web): keep the whole board on screen as the chain grows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Giving up was a button under the chain, and the chain is the one part of
the board with no ceiling: the longer a game ran, the further off the
bottom of the screen it went — worst exactly when a player wants it.

It sits above the list now, on the right, away from the field a player
is typing into, in the danger colour and at a full 44px. The chain takes
the height that is left and scrolls inside itself, so the syllable, the
clock and the word field stay where they are however long it gets.

The error banner's dismiss cross gets the same 44px, negative-margined
back out so the banner keeps its height.
---
 web/src/lib/components/ChainHistory.svelte |  4 ++++
 web/src/lib/components/GameBoard.svelte    | 28 ++++++++++++++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/ChainHistory.svelte b/web/src/lib/components/ChainHistory.svelte
index 41be184..617e2df 100644
--- a/web/src/lib/components/ChainHistory.svelte
+++ b/web/src/lib/components/ChainHistory.svelte
@@ -85,8 +85,12 @@
 </section>
 
 <style>
+	/* Takes whatever height the board has left so the list scrolls inside
+	   itself; the syllable, the input and the buttons above it stay put
+	   however long the chain gets. */
 	.chain {
 		display: flex;
+		flex: 1;
 		flex-direction: column;
 		min-height: 0;
 	}
diff --git a/web/src/lib/components/GameBoard.svelte b/web/src/lib/components/GameBoard.svelte
index 5f94de2..bb8d2e3 100644
--- a/web/src/lib/components/GameBoard.svelte
+++ b/web/src/lib/components/GameBoard.svelte
@@ -72,11 +72,14 @@
 		{/if}
 	{/if}
 
-	<ChainHistory />
-
+	<!-- Above the chain, not below it: the chain is the one part of the board
+	     that grows, and a button under it walks off the bottom of the screen
+	     exactly as the game gets long enough to want to give up on. -->
 	{#if game.state.phase === 'playing' && !game.iAmOut}
 		<button type="button" class="resign" onclick={onresign}>{t.resign}</button>
 	{/if}
+
+	<ChainHistory />
 </section>
 
 <style>
@@ -146,9 +149,17 @@
 		font-size: 0.9rem;
 	}
 
+	/* A 44px target on a glyph that is a fraction of that: the padding is
+	   negative-margined back out so the banner keeps its height. */
 	.error button {
+		flex: none;
+		width: 44px;
+		height: 44px;
+		margin: -12px -6px;
 		border: 0;
+		border-radius: var(--radius-sm);
 		background: none;
+		color: inherit;
 		font-size: 1.1rem;
 		line-height: 1;
 	}
@@ -162,13 +173,22 @@
 		text-align: center;
 	}
 
+	/* Right of the board and away from the input: giving up is the one thing
+	   here nobody should hit by accident while typing. Danger coloured because
+	   it ends the game, subordinate because it is not the way to play it. */
 	.resign {
-		align-self: center;
+		align-self: flex-end;
+		min-height: 44px;
 		padding: 8px 16px;
 		border: 1px solid var(--border);
 		border-radius: var(--radius-sm);
 		background: transparent;
-		color: var(--text-muted);
+		color: var(--danger);
 		font-size: 0.85rem;
+		transition: background-color 150ms ease-out;
+	}
+
+	.resign:hover {
+		background: var(--danger-soft);
 	}
 </style>