fix room id label behaving weirdly, issue #260

TheSecretOrganization · Oct 17, 2024 · 952f156 · 952f156
1 parent e275ea0
commit 952f156
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/django/src/games/templates/pong.html b/django/src/games/templates/pong.html
@@ -25,7 +25,7 @@
 				<form class="form-group my-4 w-100" id="join-form">
 					<div class="form-floating w-100 room-input-container mb-4">
 						<input class="form-control w-100 room-input" type="text" id="join-id" placeholder="Room Id">
-						<label for="join-id" class="w-100 room-input">Room ID</label>
+						<label id="join-label" for="join-id" class="room-input">Room ID</label>
 					</div>
 					<button type="submit"
 						class="btn pong-selection-buttons pong-btn-scnd-color text-decoration-none mb-4 w-100 fw-bold">Join</button>

diff --git a/nginx/src/css/games.css b/nginx/src/css/games.css
@@ -59,3 +59,19 @@
 .room-input {
     background-color: var(--light-base-clr);
 }
+
+.room-input:focus {
+    background-color: var(--light-base-clr);
+}
+
+#join-label {
+    box-sizing: border-box;
+    width: auto;
+    height: auto;
+    padding-top: 0rem;
+    margin-top: 1rem;
+}
+
+#join-label::after {
+    background-color: var(--light-base-clr);
+}