From e61940c1088e5cdf59d715980740b00bbdf45f78 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 06:17:16 +0200
Subject: [PATCH] cleanup: extract .section-title flex layout +
 .section-title-label

The sidebar's streamer section-title carried two inline flex containers:
- outer .section-title with display:flex; align-items:center; gap:6px; justify-content:space-between (so the bulk-remove X button can pin right while the title group stays left)
- inner span with display:flex; align-items:baseline; gap:8px (so the title text and the streamer counter share the same text-baseline rather than centring against each other)

.section-title is only used in this one spot, so the flex layout becomes part of the class definition (no risk of bleeding into other usages). The inner-span pattern moves to a dedicated .section-title-label class. Two inline style attributes gone.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html |  4 ++--
 src/styles.css | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/index.html b/src/index.html
index 42d37af..bfcd897 100644
--- a/src/index.html
+++ b/src/index.html
@@ -216,8 +216,8 @@
                 </div>
             </nav>
 
-            <div class="section-title" id="streamerSectionTitle" style="display:flex; align-items:center; gap:6px; justify-content:space-between;">
-                <span style="display:flex; align-items:baseline; gap:8px;">
+            <div class="section-title" id="streamerSectionTitle">
+                <span class="section-title-label">
                     <span id="streamerSectionTitleText">Streamer</span>
                     <span id="streamerSectionCounter" class="streamer-section-counter"></span>
                 </span>
diff --git a/src/styles.css b/src/styles.css
index 42db7c6..5849fdf 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -105,6 +105,19 @@ body {
     color: var(--text-secondary);
     padding: 15px 15px 8px;
     letter-spacing: 0.5px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    justify-content: space-between;
+}
+
+/* Inner label group inside .section-title — keeps the title text and
+   the streamer-section-counter aligned on the text baseline as a single
+   unit, separate from the bulk-remove X button that pins to the right. */
+.section-title-label {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
 }
 
 .streamers {