From 377524c037b69eb4cf394de7feb86de2ad556148 Mon Sep 17 00:00:00 2001
From: Barely Removable <user@users-MacBook-Air.local>
Date: Thu, 27 Aug 2026 07:59:26 -0700
Subject: [PATCH] Move the service pills out of the header into a Status
 section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pills occupied a second full-width row of the header at every width,
which is a lot of permanent chrome for something you glance at. They now
open <main> as their own "Status" section, directly above Right now —
where you'd look for them, and consistent with every other band on the
page carrying a heading.

The header drops to a single row (brand left, clock and settings right),
so it no longer needs flex-wrap or the order: 1/2/3 shuffle that kept
the pill row beneath the brand. Pills go to var(--tap) height now
they're content rather than header furniture, and left-align with every
other section instead of centring.

Behaviour is unchanged: the pills keep their svc-<key> ids, so the
polling in dashboard.js needed no edit, and they still wrap rather than
scroll so no service is ever hidden.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 static/css/dashboard.css | 32 +++++++++++++-------------------
 templates/dashboard.html | 37 ++++++++++++++++++++++---------------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index 94925e4..38faf38 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -1,10 +1,10 @@
 
 /* ── Header ─────────────────────────────────────────── */
-/* Two deliberate rows at every width: identity + controls on top,
-   service pills on their own full-width row beneath. Letting the pills
-   share row one made the header wrap into ragged rows and orphan the
-   clock as soon as the six of them stopped fitting. Scrolls away with
-   the page — a status bar isn't worth permanent screen real estate. */
+/* Identity on the left, clock + settings on the right, one row at every
+   width. The service pills used to occupy a second full-width row here;
+   they now live in the Status section at the top of <main>, which is
+   where someone looks for them. Scrolls away with the page — a status
+   bar isn't worth permanent screen real estate. */
 header {
   background: var(--surface);
   border-bottom: 1px solid var(--border);
@@ -12,10 +12,8 @@ header {
   display: flex;
   align-items: center;
   gap: 0.75rem var(--gap);
-  flex-wrap: wrap;
 }
 .brand {
-  order: 1;
   display: flex;
   align-items: center;
   gap: 0.65rem;
@@ -31,25 +29,24 @@ header {
   white-space: nowrap;
 }
 
-/* Service status pills — own row, wrapping among themselves so every
-   service stays visible at any width. Never scroll or clip: a hidden
-   pill is a service whose status you can't see. */
+/* Service status pills — the Status section's only content, left-aligned
+   with every other section's content and wrapping among themselves so
+   every service stays visible at any width. Never scroll or clip: a
+   hidden pill is a service whose status you can't see. */
 .svc-strip {
-  order: 3;
   display: flex;
   align-items: center;
-  gap: 0.4rem;
-  flex: 0 0 100%;
+  gap: 0.5rem;
   flex-wrap: wrap;
-  justify-content: center;
   min-width: 0;
 }
+/* Full --tap height now they're content rather than header furniture. */
 .svc-pill {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
-  padding: 0.35rem 0.7rem;
-  min-height: 34px;
+  padding: 0.35rem 0.9rem;
+  min-height: var(--tap);
   background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: 100px;
@@ -74,7 +71,6 @@ header {
 .status-light.warn { background: var(--warn);   box-shadow: 0 0 0 3px var(--warn-dim); }
 
 .header-right {
-  order: 2;
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -712,12 +708,10 @@ footer .version {
   .row.cols-3 > :first-child { grid-column: auto; }
 }
 @media (max-width: 700px) {
-  /* Row order and the full-width pill row are set in the base rules. */
   header { padding: 0.7rem 1rem; gap: 0.6rem; }
   .brand { flex: 1 1 auto; }
   .brand h1 { font-size: var(--fs-base); }
   .header-clock { display: none; }
-  .svc-strip { justify-content: flex-start; }
   main { padding: 1rem; }
   .card-body { padding: 0.9rem; }
   .card-header { padding: 0.75rem 0.9rem; }
diff --git a/templates/dashboard.html b/templates/dashboard.html
index c32dd32..17bb60b 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -58,21 +58,6 @@
       <h1>Media Centre</h1>
     </div>
 
-    <nav class="svc-strip" aria-label="Service status">
-      {{ svc_pill('sonarr',   'Sonarr',   service_urls.sonarr,   sonarr.status == 'ok',
-                  (sonarr.total_series ~ ' series') if sonarr.status == 'ok' else 'offline') }}
-      {{ svc_pill('radarr',   'Radarr',   service_urls.radarr,   radarr.status == 'ok',
-                  (radarr.total_movies ~ ' movies') if radarr.status == 'ok' else 'offline') }}
-      {{ svc_pill('prowlarr', 'Prowlarr', service_urls.prowlarr, prowlarr.status == 'ok',
-                  (prowlarr.up_count ~ '/' ~ prowlarr.total ~ ' up') if prowlarr.status == 'ok' else 'offline') }}
-      {{ svc_pill('sabnzbd',  'SABnzbd',  service_urls.sabnzbd,  sabnzbd.status == 'ok',
-                  sabnzbd.speed if sabnzbd.status == 'ok' else 'offline') }}
-      {{ svc_pill('tautulli', 'Tautulli', service_urls.tautulli, tautulli.status == 'ok',
-                  ((tautulli.active_streams ~ ' streaming') if tautulli.active_streams > 0 else '0 streams') if tautulli.status == 'ok' else 'offline') }}
-      {{ svc_pill('ombi',     'Ombi',     service_urls.ombi,     ombi.status == 'ok',
-                  (ombi.total_pending ~ ' pending') if ombi.status == 'ok' else 'offline') }}
-    </nav>
-
     <div class="header-right">
       <div class="header-clock" id="header-clock">—</div>
       <a href="{{ url_for('settings_page') }}" class="icon-btn" aria-label="Settings">
@@ -83,6 +68,28 @@
 
   <main>
 
+    <!-- ══ Status — is everything reachable? ══ -->
+    <section class="section" aria-labelledby="h-status">
+      <h2 id="h-status">Status</h2>
+      {# Every service stays visible at every width — these wrap onto more
+         rows rather than scrolling or truncating. A hidden pill is a service
+         whose status you can't see. #}
+      <nav class="svc-strip" aria-label="Service status">
+        {{ svc_pill('sonarr',   'Sonarr',   service_urls.sonarr,   sonarr.status == 'ok',
+                    (sonarr.total_series ~ ' series') if sonarr.status == 'ok' else 'offline') }}
+        {{ svc_pill('radarr',   'Radarr',   service_urls.radarr,   radarr.status == 'ok',
+                    (radarr.total_movies ~ ' movies') if radarr.status == 'ok' else 'offline') }}
+        {{ svc_pill('prowlarr', 'Prowlarr', service_urls.prowlarr, prowlarr.status == 'ok',
+                    (prowlarr.up_count ~ '/' ~ prowlarr.total ~ ' up') if prowlarr.status == 'ok' else 'offline') }}
+        {{ svc_pill('sabnzbd',  'SABnzbd',  service_urls.sabnzbd,  sabnzbd.status == 'ok',
+                    sabnzbd.speed if sabnzbd.status == 'ok' else 'offline') }}
+        {{ svc_pill('tautulli', 'Tautulli', service_urls.tautulli, tautulli.status == 'ok',
+                    ((tautulli.active_streams ~ ' streaming') if tautulli.active_streams > 0 else '0 streams') if tautulli.status == 'ok' else 'offline') }}
+        {{ svc_pill('ombi',     'Ombi',     service_urls.ombi,     ombi.status == 'ok',
+                    (ombi.total_pending ~ ' pending') if ombi.status == 'ok' else 'offline') }}
+      </nav>
+    </section>
+
     <!-- ══ Right now — the time-sensitive row, above the fold ══ -->
     <section class="section hero" aria-labelledby="h-now">
       <h2 id="h-now">Right now</h2>