From f606eea59cf8bf428a994974bc8376687c731ef5 Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 09:26:36 +0200 Subject: [PATCH] cleanup: .section-title.compact modifier instead of inline marginBottom toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit renderStreamers in renderer-streamers.ts was toggling the streamer-section title's bottom margin between 4px and "" via an inline style assignment, conditional on whether the list-filter input was visible directly below. Replaced with a .compact modifier class — same visual effect, but the CSS declaration lives next to the .section-title base rule where future readers will look, and the JS gets to use classList.toggle instead of poking at inline styles. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/renderer-streamers.ts | 2 +- src/styles.css | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts index d352fd7..15931ad 100644 --- a/src/renderer-streamers.ts +++ b/src/renderer-streamers.ts @@ -423,7 +423,7 @@ function renderStreamers(): void { const showFilter = all.length >= STREAMER_FILTER_THRESHOLD; if (filterInput) filterInput.style.display = showFilter ? '' : 'none'; // Compact title margin when filter is shown — avoids double gap. - if (sectionTitle) sectionTitle.style.marginBottom = showFilter ? '4px' : ''; + if (sectionTitle) sectionTitle.classList.toggle('compact', showFilter); // Empty state — small hint inside the sidebar when no streamers have // been added yet. Without this the user sees a heading + blank space diff --git a/src/styles.css b/src/styles.css index c6ed1b0..cabc77b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -120,6 +120,14 @@ body { gap: 8px; } +/* Compact spacing variant — applied when the sidebar's streamer-list + filter input is visible directly below the title, so the default + padding-bottom + the filter's own margin don't double up into a + visually loose gap. */ +.section-title.compact { + margin-bottom: 4px; +} + .streamers { flex: 1; overflow-y: auto;