fix(web): keep the whole board on screen as the chain grows

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

@@ -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;
 	}

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>