Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

cleanup: .section-header-actions class + drop redundant margin-top:0 on archiveTitle

Browse Source 
The stats card header (Archiv-Statistik) had an inline-styled inner div grouping the "last scanned" label with the Aktualisieren button — display:flex; gap:8px; align-items:center;. Extracted that pattern to .section-header-actions, which has a real semantic role: it's the right-side action cluster inside a section-header that needs to stay together as a single flex item so the parent's justify-content:space-between can pin it to the right.

Same edit drops the inline style="margin-top:0;" from <h3 id="archiveTitle"> — the global * { margin: 0 } reset already zeroes it, so the inline declaration was a literal no-op that just added noise to the markup. Worth removing as it might mislead future readers into thinking the override does something.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 07:17:09 +02:00
parent 8b917bee77
commit 8f6d7b2d9a
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.html
View File

@ -421,7 +421,7 @@
<div class="settings-card">
<div class="form-row section-header">
<h3 id="statsTitle">Archiv-Statistik</h3>
<div style="display:flex; gap:8px; align-items:center;">
<div class="section-header-actions">
<span id="statsLastScannedLabel" class="form-sublabel"></span>
<button class="btn-secondary" id="btnStatsRefresh" onclick="refreshArchiveStats()">Aktualisieren</button>
</div>
@ -453,7 +453,7 @@
<!-- Archive Search Tab -->
<div class="tab-content" id="archiveTab">
<div class="settings-card">
<h3 id="archiveTitle" style="margin-top:0;">Archiv durchsuchen</h3>
<h3 id="archiveTitle">Archiv durchsuchen</h3>
<p id="archiveIntro" class="card-intro">Suche nach Dateinamen, Streamern oder Datum-Strings. Treffer zeigen Recordings (Live + VOD); zugehoerige Chat- und Events-Dateien werden als Companion-Buttons angeboten.</p>
<div class="form-row" style="gap:8px; margin-bottom: 8px; flex-wrap: wrap; align-items:center;">
<input type="text" id="archiveSearchQuery" class="filter-input flex-1-1-240" placeholder="Suche...">

10
src/styles.css
View File

@ -1777,6 +1777,16 @@ select option {
margin: 0;
}
/* Right-side action cluster inside a section-header — keeps a label
and a button (or two) together as a single unit so the section-header
parent's justify-content:space-between can pin the cluster to the
right while the h3 stays at the left. */
.section-header-actions {
display: flex;
gap: 8px;
align-items: center;
}
/* Plain centred form-row with bottom margin — the most common
form-row shape in Settings (button + button + inline-toggle, or
number-input + sublabel). Replaces three duplicated inline copies