full test suite passes; .gear-btn once again moved, this time to new file _applets.scss, along with generic applet styling attrs (removed from _base & .dash, respectively); _gameboard.scss in many ways mirrors particularities of _dash, but also feat. style attrs for the Game Kit applet consumables array; sacrificed btn in the latter now that applet dimensions defined on gameboard.html

src/apps/gameboard/tests/integrated/test_views.py

@@ -34,8 +34,8 @@ class GameboardViewTest(TestCase):
     def test_gameboard_shows_new_game_applet(self):
         [_] = self.parsed.cssselect("#id_applet_new_game")
     
-    def test_gameboard_shows_game_kit_btn(self):
+    def test_gameboard_shows_game_kit(self):
-        [_] = self.parsed.cssselect("#id_game_kit_btn")
+        [_] = self.parsed.cssselect("#id_game_kit")
 
     def test_gameboard_shows_game_gear(self):
         [_] = self.parsed.cssselect(".gear-btn")

src/apps/gameboard/views.py

@@ -22,6 +22,7 @@ def gameboard(request):
             "coin": coin,
             "free_tokens": free_tokens,
             "applets": applet_context(request.user, "gameboard"),
+            "page_class": "page-gameboard",
         }
     )
 

src/functional_tests/test_gameboard.py

@@ -49,20 +49,12 @@ class GameboardNavigationTest(FunctionalTest):
         # 1. Log in, nav to gameboard
         self.create_pre_authenticated_session("capman@test.io")
         self.browser.get(self.live_server_url + "/gameboard/")
-        # 2. Assert game kit & gear btns both present (stacked vertically)
+        # 2. Assert game kit applet & gear btn present
         self.wait_for(
-            lambda: self.browser.find_element(By.ID, "id_game_kit_btn")
+            lambda: self.browser.find_element(By.ID, "id_game_kit")
         )
         self.browser.find_element(By.CSS_SELECTOR, ".gear-btn")
-        # 3. Click game kit btn to open panel
+        # 3. Assert Coin-on-a-String present in kit
-        self.browser.find_element(By.ID, "id_game_kit_btn").click()
-        # 4. Wait for game kit panel to become visible
-        self.wait_for(
-            lambda: self.assertTrue(
-                self.browser.find_element(By.ID, "id_game_kit").is_displayed()
-            )
-        )
-        # 5. Assert Coin-on-a-String present in kit
         coin = self.browser.find_element(By.ID, "id_kit_coin_on_a_string")
         # 6. Hover over it; assert tooltip shows name, entry text & reuse description
         ActionChains(self.browser).move_to_element(coin).perform()

src/static_src/scss/_applets.scss

@@ -0,0 +1,115 @@
+// ── Gear button ────────────────────────────────────────────
+.gear-btn {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    z-index: 1;
+    font-size: 2rem;
+    cursor: pointer;
+    color: rgba(var(--secUser), 1);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background-color: rgba(var(--priUser), 1);
+    border: 0.15rem solid rgba(var(--secUser), 1);
+}
+
+// ── Applet menu (shared structure) ─────────────────────────
+%applet-menu {
+    position: absolute;
+    bottom: 3rem;
+    right: 0.5rem;
+    z-index: 100;
+    background-color: rgba(var(--priUser), 0.95);
+    border: 0.15rem solid rgba(var(--secUser), 0.5);
+    box-shadow:
+        0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5),
+        0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
+    ;
+    border-radius: 0.75rem;
+    padding: 1rem;
+
+    .menu-btns {
+        display: flex;
+        gap: 0.25rem;
+        margin-top: 0.75rem;
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    input[type="checkbox"] {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 0.9em;
+        height: 0.9em;
+        border: 0.1rem solid rgba(var(--secUser), 0.4);
+        border-radius: 0.25rem;
+        background: transparent;
+        cursor: pointer;
+        position: relative;
+        flex-shrink: 0;
+        top: 0.1em;
+
+        &:checked::after {
+            content: '';
+            position: absolute;
+            left: 0.2em;
+            bottom: 0.2em;
+            width: 0.55em;
+            height: 1em;
+            border: 0.12em solid rgba(var(--ninUser), 1);
+            border-top: none;
+            border-left: none;
+            transform: rotate(45deg);
+        }
+    }
+}
+
+#id_dash_applet_menu  { @extend %applet-menu; }
+#id_game_applet_menu  { @extend %applet-menu; }
+
+// ── Applets grid (shared across all boards) ────────────────
+%applets-grid {
+    container-type: inline-size;
+    --grid-gap: 0.5rem;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-auto-rows: 3rem;
+    gap: var(--grid-gap);
+    padding: 0.75rem;
+    -webkit-overflow-scrolling: touch;
+    mask-image: linear-gradient(
+        to bottom,
+        transparent 0%,
+        black 2%,
+        black 98%,
+        transparent 100%
+    );
+
+    section {
+        border: 0.2rem solid rgba(var(--secUser), 0.5);
+        border-radius: 0.75rem;
+        padding: 1rem;
+        overflow: hidden;
+        min-width: 0;
+        grid-column: span var(--applet-cols, 12);
+        grid-row: span var(--applet-rows, 3);
+
+        @container (max-width: 550px) {
+            grid-column: span 12;
+        }
+    }
+}
+
+#id_applets_container      { @extend %applets-grid; }
+#id_game_applets_container { @extend %applets-grid; }

src/static_src/scss/_base.scss

@@ -197,24 +197,4 @@ body {
             opacity: 0.6;
         }
     }
-}
-
-.gear-btn {
-    position: absolute;
-    bottom: 0.5rem;
-    right: 0.5rem;
-    z-index: 1;
-    background: none;
-    border: none;
-    font-size: 2rem;
-    cursor: pointer;
-    color: rgba(var(--secUser), 1);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 3rem;
-    height: 3rem;
-    border-radius: 50%;
-    background-color: rgba(var(--priUser), 1);
-    border: 0.15rem solid rgba(var(--secUser), 1);
 }

src/static_src/scss/_dashboard.scss

@@ -28,90 +28,7 @@ body.page-dashboard {
     position: relative;
 }
 
-#id_dash_applet_menu {
-    position: absolute;
-    bottom: 3rem;
-    right: 0.5rem;
-    z-index: 100;
-    background-color: rgba(var(--priUser), 0.95);
-    border: 0.15rem solid rgba(var(--secUser), 0.5);
-    box-shadow:
-        0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5),
-        0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
-    ;
-    border-radius: 0.75rem;
-    padding: 1rem;
-
-    .menu-btns {
-        display: flex;
-        gap: 0.25rem;
-        margin-top: 0.75rem;
-    }
-
-    form {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    input[type="checkbox"] {
-        appearance: none;
-        -webkit-appearance: none;
-        width: 0.9em;
-        height: 0.9em;
-        border: 0.1rem solid rgba(var(--secUser), 0.4);
-        border-radius: 0.25rem;
-        background: transparent;
-        cursor: pointer;
-        position: relative;
-        flex-shrink: 0;
-        top: 0.1em;
-
-        &:checked::after {
-            content: '';
-            position: absolute;
-            left: 0.2em;
-            bottom: 0.2em;
-            width: 0.55em;
-            height: 1em;
-            border: 0.12em solid rgba(var(--ninUser), 1);
-            border-top: none;
-            border-left: none;
-            transform: rotate(45deg);
-        }
-    }
-}
-
 #id_applets_container {
-    container-type: inline-size;
-    --grid-gap: 0.5rem;
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-auto-rows: 3rem;
-    gap: var(--grid-gap);
-    padding: 0.75rem;
-    -webkit-overflow-scrolling: touch;
-    mask-image: linear-gradient(
-        to bottom,
-        transparent 0%,
-        black 2%,
-        black 98%,
-        transparent 100%
-    );
-
-    section {
-        border: 0.2rem solid rgba(var(--secUser), 0.5);
-        border-radius: 0.75rem;
-        padding: 1rem;
-        overflow: hidden;
-        min-width: 0;
-        grid-column: span var(--applet-cols, 12);
-        grid-row: span var(--applet-rows, 3);
-    }
-
     #id_applet_my_lists {
         padding: 1.25rem 1.5rem;
         display: flex;
@@ -220,12 +137,6 @@ body.page-dashboard {
         min-width: 0;
         overflow: hidden;
     }
-    
-    #id_applets_container {
-        section {
-            grid-column: span 12;
-        }
-    }
 }
 
 @media (min-width: 738px) {

src/static_src/scss/_gameboard.scss

@@ -0,0 +1,73 @@
+html:has(body.page-gameboard) {
+    overflow: hidden;
+}
+
+body.page-gameboard {
+    overflow: hidden;
+
+    .container {
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+    }
+
+    .row {
+        flex-shrink: 0;
+        margin-bottom: -1rem;
+    }
+}
+
+.gameboard-page {
+    flex: 1;
+    min-width: 425px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+@media (max-width: 550px) {
+    .gameboard-page {
+        min-width: 0;
+        overflow: hidden;
+    }
+}
+
+@media (min-width: 738px) {
+    .gameboard-page {
+        min-width: 666px;
+    }
+}
+
+#id_game_applets_container {
+    #id_applet_game_kit {
+        display: flex;
+        flex-direction: column;
+
+        #id_game_kit {
+            flex: 1;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 0.75rem;
+            overflow-x: auto;
+            scrollbar-width: none;
+            &::-webkit-scrollbar { display: none; }
+        }
+    }
+}
+
+@media (max-height: 500px) {
+    body.page-gameboard {
+        .container {
+            .row {
+                padding: 0.25rem 0;
+                .col-lg-6 h2 {
+                    margin-bottom: 0.5rem;
+                }
+            }
+        }
+    }
+}

src/static_src/scss/core.scss

@@ -1,7 +1,9 @@
 @import 'rootvars';
+@import 'applets';
 @import 'base';
 @import 'button-pad';
 @import 'dashboard';
+@import 'gameboard';
 @import 'palette-picker';
 @import 'wallet-tokens';
 

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

@@ -2,13 +2,8 @@
     id="id_applet_game_kit"
     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
 >
-    <button
+    <h2>Game Kit</h2>
-        id="id_game_kit_btn"
+    <div id="id_game_kit">
-        onclick="document.getElementById('id_game_kit').style.display='block'"
-    >
-        Game Kit
-    </button>
-    <div id="id_game_kit" style="display: none;">
         {% if coin %}
             <div id="id_kit_coin_on_a_string" class="token">
                 <i class="fa-solid fa-clover"></i>