fixed modal UX issue; now persists as intended, until token cost met in all six slots

src/functional_tests/test_gatekeeper.py

@@ -1,3 +1,5 @@
+import time
+
 from selenium.webdriver.common.by import By
 
 from .base import FunctionalTest
@@ -195,6 +197,23 @@ class GatekeeperTest(FunctionalTest):
         ))
         self.assertFalse(Room.objects.filter(name="Doomed Room").exists())
 
+    def test_gatekeeper_overlay_persists_after_htmx_poll(self):
+        # 1. Create room directly (GATHERING) and navigate to its gate URL
+        self.create_pre_authenticated_session("founder@test.io")
+        founder = User.objects.get(email="founder@test.io")
+        room = Room.objects.create(name="Persistent Room", owner=founder)
+        self.browser.get(self.live_server_url + f"/gameboard/room/{room.id}/gate/")
+        # 2. Assert overlay visible on initial page load
+        self.wait_for(
+            lambda: self.browser.find_element(By.CSS_SELECTOR, ".gate-overlay")
+        )
+        # 3. Wait for HTMX poll cycle to fire (poll interval is 3s)
+        time.sleep(4)
+        # 4. Assert overlay still present and visible after poll
+        overlays = self.browser.find_elements(By.CSS_SELECTOR, ".gate-overlay")
+        self.assertEqual(len(overlays), 1)
+        self.assertTrue(overlays[0].is_displayed())
+
     def test_gamer_can_abandon_room_via_gear_menu(self):
         founder = User.objects.create(email="founder@test.io")
         room = Room.objects.create(name="Dragon's Den", owner=founder)

src/static_src/scss/_gameboard.scss

@@ -93,6 +93,15 @@ body.page-gameboard {
     }
 }
 
+#id_applet_my_games {
+
+    ul {
+        display: flex;
+        flex-direction: column;
+        
+    }
+}
+
 #id_tooltip_portal {
     position: fixed;
     z-index: 9999;

src/templates/apps/gameboard/_partials/_applet-my-games.html

@@ -7,7 +7,7 @@
         {% for room in my_games %}
             <li><a href="{% url 'epic:gatekeeper' room.id %}">{{ room.name }}</a></li>
         {% empty %}
-            <li><small>No games yet</small></li>
+            <li class="game-list-item"><small>No games yet</small></li>
         {% endfor %}
     </ul>
 </section>

src/templates/apps/gameboard/_partials/_applet-new-game.html

@@ -6,6 +6,6 @@
     <form method="POST" action="{% url "epic:create_room" %}">
         {% csrf_token %}
         <input id="id_new_game_name" name="name" type="text" placeholder="Room name" />
-        <button type="submit" id="id_create_game_btn" class="btn btn-primary btn-xl">Start<br>Game</button>
+        <button type="submit" id="id_create_game_btn" class="btn btn-confirm">OK</button>
     </form>
 </section>

src/templates/apps/gameboard/_partials/_gatekeeper.html

@@ -1,4 +1,11 @@
-<div class="gate-modal" role="dialog" aria-label="Gatekeeper">
+<div
+    id="id_gate_wrapper"
+    hx-get="{% url 'epic:gate_status' room.id %}"
+    hx-trigger="every 3s"
+    hx-swap="outerHTML"
+>
+    <div class="gate-overlay">
+        <div class="gate-modal" role="dialog" aria-label="Gatekeeper">
             <header class="gate-header">
                 <h1>{{ room.name }}</h1>
                 <span class="gate-status">{{ room.gate_status }}</span>
@@ -33,4 +40,6 @@
                     <button type="submit" id="id_invite_btn" class="btn btn-primary btn-xl">Invite</button>
                 </form>
             {% endif %}
+        </div>
+    </div>
 </div>

src/templates/apps/gameboard/room.html

@@ -10,18 +10,9 @@
             <div class="room-table"></div>
         </div>
 
-        <div
-            id="id_gate_wrapper"
-            hx-get="{% url 'epic:gate_status' room.id %}"
-            hx-trigger="every 3s"
-            hx-swap="outerHTML"
-        >
         {% if room.gate_status == "GATHERING" %}
-                <div class="gate-overlay">
             {% include "apps/gameboard/_partials/_gatekeeper.html" %}
-                </div>
         {% endif %}
-        </div>
         {% include "apps/gameboard/_partials/_room_gear.html" %}
     </div>
 {% endblock content %}