From 95171fd9950e5dff3ad0d12361e4a5e698eae990 Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Sat, 27 Jun 2026 19:14:56 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20lobby=20status=20bar=20scrolling=20out=20?=
 =?UTF-8?q?of=20view=20when=20many=20players=20join=20=F0=9F=8E=AF=20(#442?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

Make the lobby status bar (status label + player count) sticky at the
bottom of the player list scroll area in JoinLobbyModal. Previously,
when many players joined a lobby the status bar would scroll out of
view. The bar is now pinned with `sticky bottom-0` and has a semi-opaque
blurred background (`bg-black/60 backdrop-blur-md`) to cleanly occlude
content scrolling behind it.

**Before:**

<img width="951" height="789" alt="image"
src="https://github.com/user-attachments/assets/8a2a2f1d-1530-4f13-82be-837eaaa00256"
/>

**With this PR:**

<img width="938" height="688" alt="image"
src="https://github.com/user-attachments/assets/6c5259fb-a969-4a5f-b951-a4310f6c68c0"
/>

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [X] I have added relevant tests to the test directory

## Please put your Discord username so you can be contacted if a bug or
regression is found:

FloPinguin
---
 src/client/JoinLobbyModal.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/client/JoinLobbyModal.ts b/src/client/JoinLobbyModal.ts
index 4ced7c318..042e49a6c 100644
--- a/src/client/JoinLobbyModal.ts
+++ b/src/client/JoinLobbyModal.ts
@@ -165,7 +165,9 @@ export class JoinLobbyModal extends BaseModal {
         </div>
 
         ${html`
-          <div class="p-6 lg:p-6 border-t border-white/10 bg-black/20 shrink-0">
+          <div
+            class="p-6 lg:p-6 border-t border-white/10 bg-black/60 backdrop-blur-md shrink-0 sticky bottom-0 z-10"
+          >
             <div
               class="w-full px-4 py-3 rounded-xl border border-white/10 bg-white/5 flex items-center justify-between gap-3"
             >