From 62e223a4e95f2ed89742b9cea000fef3229a171a Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Mon, 29 Sep 2025 09:51:54 +0900
Subject: [PATCH] Keep Lobby ID bar sticky at top of modal (#2108)

## Description:

This PR adjusts the HostLobbyModal so that the lobby ID bar stays
visible at the top of the modal when scrolling.
Fixes #2082


https://github.com/user-attachments/assets/273b6ebe-3538-4489-b771-67261f7642f8


In this PR, when the ID box became sticky, the background sometimes made
the ID hard to read.
To fix this, I made the background color slightly darker for better
visibility.

## 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
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

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

aotumuri
---
 src/client/styles.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/client/styles.css b/src/client/styles.css
index 5b58ba793..78e7fe842 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -199,7 +199,7 @@ label.option-card:hover {
   display: flex;
   align-items: center;
   gap: 8px;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.6);
   padding: 8px 16px;
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.1);
@@ -536,6 +536,9 @@ label.option-card:hover {
   display: flex;
   align-items: center;
   justify-content: center;
+  position: sticky;
+  top: 0;
+  z-index: 50;
   gap: 10px;
   margin: 40px 0px 0px 0px;
 }