Skip to content

fix: keep host controls in view with a full room #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gajjug004 merged 5 commits into from
Aug 22, 2026
Merged

fix: keep host controls in view with a full room #10

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a4a439b
fix: keep host controls in view with a full room
gajjug004 Aug 21, 2026
d11016e
fix: cap the final leaderboard at the top 25
gajjug004 Aug 21, 2026
6fab75f
fix: stop the lobby chips stretching in a half-empty room
gajjug004 Aug 22, 2026
7b86209
fix: let the lobby and podium lists hug their rows
gajjug004 Aug 22, 2026
4c9ba58
style: drop the scrollbars on the lobby and podium lists
gajjug004 Aug 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions frontend/src/pages/Host.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -99,15 +99,20 @@
</button>
</div>

<div class="flex 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"
>
{{ participants.length }}
{{ participants.length === 1 ? "player" : "players" }} in
</p>
<div class="flex max-w-5xl flex-wrap justify-center gap-2.5">
<!-- 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="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. -->
<div
Expand Down Expand Up @@ -178,7 +183,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
Expand Down Expand Up @@ -211,9 +216,9 @@
</div>
</div>
</div>
<ol class="w-full max-w-md">
<ol class="no-scrollbar min-h-24 w-full max-w-md 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"
>
Expand Down
Loading