From 5178a975201049c4882bab08e2e6ff89981f2852 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Mon, 21 Sep 2026 15:32:16 +0700
Subject: [PATCH] fix(web): open the lobby chat on a phone and fold it when the
 game starts

Making the lobby panel collapsible left it folded from the start, with
the input hidden behind a badge before anyone had spoken, which the
browser suite caught. It now opens in the lobby and folds itself on the
first turn, which is the shape the suite and the prior UX report describe.
---
 web/src/routes/online/+page.svelte | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/routes/online/+page.svelte b/web/src/routes/online/+page.svelte
index 47d0ae8..d67c541 100644
--- a/web/src/routes/online/+page.svelte
+++ b/web/src/routes/online/+page.svelte
@@ -96,11 +96,19 @@
 	// Lifted out of ChatPanel so the pill in GameBoard's top row — reachable
 	// above the chain rather than below it — can unfold the panel and read its
 	// count without the two components knowing about each other beyond this.
-	let chatFolded = $state(true);
+	// Open in the lobby, where talking is what people are there to do, and
+	// folded the moment a game starts, so the board is not pushed off a phone
+	// screen by the conversation under it. A lobby that starts folded would
+	// hide the input behind a badge before anyone has said anything.
+	let chatFolded = $state(false);
 	let chatUnread = $state(0);
 	/** @type {HTMLElement | undefined} */
 	let talkPane = $state();
 
+	$effect(() => {
+		if (game.state.phase === 'playing') chatFolded = true;
+	});
+
 	function openChat() {
 		chatFolded = false;
 		talkPane?.scrollIntoView({ behavior: scrollBehavior(), block: 'start' });
@@ -442,9 +450,9 @@
 		<!-- errors are not routed here any more: the lobby draws its own, beside
 		     the button that produced them.
 
-		     Folded on any narrow screen now, lobby included: a lobby that never
-		     folded never had a badge either, so chat arriving there was
-		     completely silent behind a log that was itself below the fold. -->
+		     Collapsible on any narrow screen, lobby included, so chat arriving
+		     in a lobby whose panel the player folded still shows a count; it
+		     starts open there and folds itself when a game begins. -->
 		<div class="pane talk" bind:this={talkPane}>
 			<ChatPanel
 				collapsible={!wide}