From a4a439b5e2520ff2c5880b2c291d4fc19b0eb8ca Mon Sep 17 00:00:00 2001
From: gajjug004 <gajjug004@gmail.com>
Date: Sat, 22 Aug 2026 00:09:35 +0530
Subject: [PATCH 1/5] fix: keep host controls in view with a full room

The lobby chip grid and the podium leaderboard grew with the player count,
so at 500+ players the Start game and New game buttons landed below the fold
of a projector. Both lists now scroll inside the space left over, with a
bottom fade so the cut-off row reads as more content rather than a clip.
---
 frontend/src/index.css      |  6 ++++++
 frontend/src/pages/Host.vue | 13 ++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6a926b2..b0c778f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -145,6 +145,12 @@ body {
 	filter: brightness(1.1);
 }
 
+/* Scrollers that run past their box: the cut-off last row should read as
+   "there is more", not as a clipped layout. */
+.qz-fade-b {
+	mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
+}
+
 /* Dialogs: the default <dialog> lands white and unanimated on a dark app. */
 .qz-dialog {
 	margin: auto;
diff --git a/frontend/src/pages/Host.vue b/frontend/src/pages/Host.vue
index 386137d..1deb97c 100644
--- a/frontend/src/pages/Host.vue
+++ b/frontend/src/pages/Host.vue
@@ -42,7 +42,7 @@
 
 		<!-- Lobby -->
 		<template v-else-if="phase === 'lobby'">
-			<div class="flex flex-1 flex-col justify-center gap-8 p-5 sm:gap-12 sm:p-8">
+			<div class="flex min-h-0 flex-1 flex-col justify-center gap-8 p-5 sm:gap-12 sm:p-8">
 				<div class="flex flex-wrap items-center justify-center gap-8 sm:gap-14">
 					<div class="min-w-0 text-center sm:text-left">
 						<!-- inline, not a flex row: the icon has to follow the last line when a
@@ -99,7 +99,7 @@
 					</button>
 				</div>
 
-				<div class="flex flex-col items-center gap-5">
+				<div class="flex min-h-0 flex-1 flex-col items-center gap-5">
 					<p
 						v-if="participants.length"
 						class="font-mono text-xs uppercase tracking-[0.28em] text-paper/40"
@@ -107,7 +107,10 @@
 						{{ participants.length }}
 						{{ participants.length === 1 ? "player" : "players" }} in
 					</p>
-					<div class="flex max-w-5xl flex-wrap justify-center gap-2.5">
+					<!-- own scroller: a full room of players otherwise pushes Start off the projector -->
+					<div
+						class="qz-fade-b flex min-h-24 w-full max-w-5xl flex-1 flex-wrap justify-center gap-2.5 overflow-y-auto p-1"
+					>
 						<!-- The chip itself is not the kick target: a full-name-sized button is
 						     too easy to hit by accident on a projector. -->
 						<div
@@ -178,7 +181,7 @@
 		<!-- Podium -->
 		<template v-else-if="phase === 'podium'">
 			<div
-				class="flex flex-1 flex-col items-center justify-center gap-8 p-5 sm:gap-10 sm:p-8"
+				class="flex min-h-0 flex-1 flex-col items-center justify-center gap-8 p-5 sm:gap-10 sm:p-8"
 			>
 				<h1 class="font-display text-4xl font-extrabold text-paper sm:text-6xl">
 					Final results
@@ -211,7 +214,7 @@
 						</div>
 					</div>
 				</div>
-				<ol class="w-full max-w-md">
+				<ol class="qz-fade-b min-h-24 w-full max-w-md flex-1 overflow-y-auto">
 					<li
 						v-for="entry in leaderboard"
 						:key="entry.nickname"

From d11016ebc4242784474f4810592a642b69e50f3b Mon Sep 17 00:00:00 2001
From: gajjug004 <gajjug004@gmail.com>
Date: Sat, 22 Aug 2026 01:48:14 +0530
Subject: [PATCH 2/5] fix: cap the final leaderboard at the top 25

Past the top 25 the list is names nobody reads off a projector, and the
scroll to reach the bottom of 500 rows is longer than the moment lasts.
---
 frontend/src/pages/Host.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/Host.vue b/frontend/src/pages/Host.vue
index 1deb97c..e6f116b 100644
--- a/frontend/src/pages/Host.vue
+++ b/frontend/src/pages/Host.vue
@@ -216,7 +216,7 @@
 				</div>
 				<ol class="qz-fade-b min-h-24 w-full max-w-md flex-1 overflow-y-auto">
 					<li
-						v-for="entry in leaderboard"
+						v-for="entry in leaderboard.slice(0, 25)"
 						:key="entry.nickname"
 						class="flex items-center justify-between gap-3 border-b border-haze py-2.5 text-base text-paper/70 sm:text-lg"
 					>

From 6fab75fcd532c1f5a2348d6d336dfcccb3c978f5 Mon Sep 17 00:00:00 2001
From: gajjug004 <gajjug004@gmail.com>
Date: Sat, 22 Aug 2026 07:03:04 +0530
Subject: [PATCH 3/5] fix: stop the lobby chips stretching in a half-empty room

Making the chip grid a flex-1 scroller left slack under the rows in a small
lobby, and align-content: stretch grew every wrapped line to fill it, so the
rounded-full chips rendered as blobs.
---
 frontend/src/pages/Host.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Host.vue b/frontend/src/pages/Host.vue
index e6f116b..0912970 100644
--- a/frontend/src/pages/Host.vue
+++ b/frontend/src/pages/Host.vue
@@ -107,9 +107,12 @@
 						{{ participants.length }}
 						{{ participants.length === 1 ? "player" : "players" }} in
 					</p>
-					<!-- own scroller: a full room of players otherwise pushes Start off the projector -->
+					<!-- own scroller: a full room of players otherwise pushes Start off the projector.
+					     safe center, not plain center: a half-empty lobby centres its rows, but a
+					     full one aligns to the start so the first row stays scrollable into view.
+					     content-center rides along as the fallback where safe is unsupported. -->
 					<div
-						class="qz-fade-b flex min-h-24 w-full max-w-5xl flex-1 flex-wrap justify-center gap-2.5 overflow-y-auto p-1"
+						class="qz-fade-b flex min-h-24 w-full max-w-5xl flex-1 flex-wrap content-center justify-center gap-2.5 overflow-y-auto p-1 [align-content:safe_center]"
 					>
 						<!-- The chip itself is not the kick target: a full-name-sized button is
 						     too easy to hit by accident on a projector. -->

From 7b8620990ec4a9f72f0c2f6f47b68a818cf30521 Mon Sep 17 00:00:00 2001
From: gajjug004 <gajjug004@gmail.com>
Date: Sat, 22 Aug 2026 07:09:16 +0530
Subject: [PATCH 4/5] fix: let the lobby and podium lists hug their rows

flex-1 gave both scrollers more height than their content in a small room,
which stretched the chip rows and stranded them below the player count. They
now shrink out of the leftover space only when the list overflows.

Drops the bottom fade with it: the mask ran whether or not the list scrolled,
so it dimmed the last row of a lobby that fit on screen.
---
 frontend/src/index.css      |  6 ------
 frontend/src/pages/Host.vue | 13 ++++++-------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index b0c778f..6a926b2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -145,12 +145,6 @@ body {
 	filter: brightness(1.1);
 }
 
-/* Scrollers that run past their box: the cut-off last row should read as
-   "there is more", not as a clipped layout. */
-.qz-fade-b {
-	mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
-}
-
 /* Dialogs: the default <dialog> lands white and unanimated on a dark app. */
 .qz-dialog {
 	margin: auto;
diff --git a/frontend/src/pages/Host.vue b/frontend/src/pages/Host.vue
index 0912970..31b5d01 100644
--- a/frontend/src/pages/Host.vue
+++ b/frontend/src/pages/Host.vue
@@ -99,7 +99,7 @@
 					</button>
 				</div>
 
-				<div class="flex min-h-0 flex-1 flex-col items-center gap-5">
+				<div class="flex min-h-0 flex-1 flex-col items-center justify-center gap-5">
 					<p
 						v-if="participants.length"
 						class="font-mono text-xs uppercase tracking-[0.28em] text-paper/40"
@@ -107,12 +107,11 @@
 						{{ participants.length }}
 						{{ participants.length === 1 ? "player" : "players" }} in
 					</p>
-					<!-- own scroller: a full room of players otherwise pushes Start off the projector.
-					     safe center, not plain center: a half-empty lobby centres its rows, but a
-					     full one aligns to the start so the first row stays scrollable into view.
-					     content-center rides along as the fallback where safe is unsupported. -->
+					<!-- shrinks to the space left over and scrolls inside it, so a full room of
+					     players cannot push Start off the projector. No flex-1: the box has to
+					     hug its rows, or a half-empty lobby strands them below the count. -->
 					<div
-						class="qz-fade-b flex min-h-24 w-full max-w-5xl flex-1 flex-wrap content-center justify-center gap-2.5 overflow-y-auto p-1 [align-content:safe_center]"
+						class="flex min-h-24 w-full max-w-5xl flex-wrap justify-center gap-2.5 overflow-y-auto p-1"
 					>
 						<!-- The chip itself is not the kick target: a full-name-sized button is
 						     too easy to hit by accident on a projector. -->
@@ -217,7 +216,7 @@
 						</div>
 					</div>
 				</div>
-				<ol class="qz-fade-b min-h-24 w-full max-w-md flex-1 overflow-y-auto">
+				<ol class="min-h-24 w-full max-w-md overflow-y-auto">
 					<li
 						v-for="entry in leaderboard.slice(0, 25)"
 						:key="entry.nickname"

From 4c9ba582c6230cc3178d6a61b8179b226a795539 Mon Sep 17 00:00:00 2001
From: gajjug004 <gajjug004@gmail.com>
Date: Sat, 22 Aug 2026 07:16:06 +0530
Subject: [PATCH 5/5] style: drop the scrollbars on the lobby and podium lists

Reuses no-scrollbar from the avatar strip. A cut-off row already says the
list runs on, and a bar down the side of a projected game is noise.
---
 frontend/src/pages/Host.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Host.vue b/frontend/src/pages/Host.vue
index 31b5d01..42acb91 100644
--- a/frontend/src/pages/Host.vue
+++ b/frontend/src/pages/Host.vue
@@ -111,7 +111,7 @@
 					     players cannot push Start off the projector. No flex-1: the box has to
 					     hug its rows, or a half-empty lobby strands them below the count. -->
 					<div
-						class="flex min-h-24 w-full max-w-5xl flex-wrap justify-center gap-2.5 overflow-y-auto p-1"
+						class="no-scrollbar flex min-h-24 w-full max-w-5xl flex-wrap justify-center gap-2.5 overflow-y-auto p-1"
 					>
 						<!-- The chip itself is not the kick target: a full-name-sized button is
 						     too easy to hit by accident on a projector. -->
@@ -216,7 +216,7 @@
 						</div>
 					</div>
 				</div>
-				<ol class="min-h-24 w-full max-w-md overflow-y-auto">
+				<ol class="no-scrollbar min-h-24 w-full max-w-md overflow-y-auto">
 					<li
 						v-for="entry in leaderboard.slice(0, 25)"
 						:key="entry.nickname"