From 796407233383e7bf4825f671d84fbe71279488a6 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Mon, 9 Nov 2026 19:15:32 +0100
Subject: fix: scope music and build panels so their layouts apply

---
 static/modules/music.js     | 26 ++++++++++++++------------
 static/modules/sbbuilder.js |  2 +-
 tests/test_frontend.py      |  4 ++++
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/static/modules/music.js b/static/modules/music.js
index e4388f7..81cf64e 100644
--- a/static/modules/music.js
+++ b/static/modules/music.js
@@ -28,19 +28,21 @@ export default {
 
   mount(el) {
     el.innerHTML = `
-      <div class="top">
-        <div class="art empty">♪</div>
-        <div class="meta">
-          <div class="title">Nothing playing</div>
-          <div class="artist muted"></div>
-          <div class="album muted"></div>
+      <div class="music">
+        <div class="top">
+          <div class="art empty">♪</div>
+          <div class="meta">
+            <div class="title">Nothing playing</div>
+            <div class="artist muted"></div>
+            <div class="album muted"></div>
+          </div>
         </div>
-      </div>
-      <div class="seek">
-        <input type="range" min="0" max="1" step="1" value="0" aria-label="Seek">
-        <span class="time num">0:00</span>
-      </div>
-      <div class="controls"></div>`;
+        <div class="seek">
+          <input type="range" min="0" max="1" step="1" value="0" aria-label="Seek">
+          <span class="time num">0:00</span>
+        </div>
+        <div class="controls"></div>
+      </div>`;
     el.querySelector(".controls").append(
       button("⏮", "prev"), button("⏯", "play"), button("⏭", "next"),
       button("Vol−", "voldown"), button("Mute", "mute"), button("Vol+", "volup"));
diff --git a/static/modules/sbbuilder.js b/static/modules/sbbuilder.js
index 56802a9..f1c574d 100644
--- a/static/modules/sbbuilder.js
+++ b/static/modules/sbbuilder.js
@@ -25,7 +25,7 @@ export default {
   interval: 5,
 
   mount(el) {
-    el.innerHTML = `<div class="sbb-summary muted"></div><div class="sbb-list"></div>`;
+    el.innerHTML = `<div class="sbb"><div class="sbb-summary muted"></div><div class="sbb-list"></div></div>`;
   },
 
   update(state, el) {
diff --git a/tests/test_frontend.py b/tests/test_frontend.py
index 0005d6c..517c674 100644
--- a/tests/test_frontend.py
+++ b/tests/test_frontend.py
@@ -78,6 +78,10 @@ class Frontend(unittest.TestCase):
         for name in names:
             self.assert_panel(name)
 
+    def test_panels_have_their_scoped_wrapper(self):
+        self.assertIn(b'class="music"', self.get("/modules/music.js")[1])
+        self.assertIn(b'class="sbb"', self.get("/modules/sbbuilder.js")[1])
+
     def test_tabbed_shell(self):
         self.assertIn(b'id="tabs"', self.get("/")[1])
         self.assertIn(b'id="tab-body"', self.get("/")[1])
-- 
cgit v1.2.3