fix(webui/overview): uniform tab rhythm + rounded sub-tab strip corners

- .tabs-list now rounds its own top corners (12px, matching .tab-navigation);
  the first/last .tab-button radii were invisible against the bar's square
  background on the Backups/Migrate/Config sub-tab strips.
- All five fleet tabs share one rhythm under the header divider: a single
  16px gap, no extra inset — .ov-tab-body drops its recessed margin/padding
  box, and the Backups/Migrate sub-tab strips gain the matching gap.
- The Peers list keeps its recessed panel via .peers-body (in-card recipe),
  no longer riding the flattened .ov-tab-body.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>

containers/libreportal/frontend/components/apps/overview/css/overview.css

@@ -60,15 +60,12 @@
   flex-shrink: 0;
 }
 
-/* Recessed dark panel holding each tab's body — same recipe as the per-app
-   .tasks-container / .backup-snapshots-container / .updater-detail-container,
-   so the fleet tabs read exactly like the app-detail tabs. */
-#overview-view .ov-tab-body {
-  margin: 16px;
-  padding: 16px;
-  background: rgba(var(--bg-rgb), 0.2);
-  border-radius: 8px;
-}
+/* Each tab's content sits flush under the header divider with one shared
+   16px gap — the same rhythm on all five tabs (the Backups/Migrate sub-tab
+   strips get the identical gap below), so no tab carries extra inset. */
+#overview-view .tab-pane > .ov-tab-body { margin: 16px 0 0; }
+#overview-view .tab-pane > .tabs-wrapper,
+#overview-view .tab-pane > .backup-layout > .tabs-wrapper { margin-top: 16px; }
 
 /* ---- Overview: health hero + action board -------------------------------- */
 /* The hero is the tab's "status circle": one glance answers "anything to do?".
@@ -233,9 +230,18 @@
 #overview-view .ov-subtabs-content .tab-panel { display: none; }
 #overview-view .ov-subtabs-content .tab-panel.active { display: block; }
 
+/* Peers sub-tab: the peer list keeps its recessed panel INSIDE the sub-tab
+   card (the in-card recipe of the per-app .tasks-container et al) — distinct
+   from .ov-tab-body, which is now a flush whole-tab body. */
+#overview-view .peers-body {
+  padding: 16px;
+  background: rgba(var(--bg-rgb), 0.2);
+  border-radius: 8px;
+}
+
 /* Peers sub-tab: actions footer at the bottom left, mirroring the app-detail
    tabs' .config-actions row. Left padding lines the buttons up with the
-   .ov-tab-body container's 16px inset above. */
+   .peers-body container's 16px inset above. */
 #overview-view .peers-actions {
   display: flex;
   gap: 10px;

containers/libreportal/frontend/components/apps/overview/js/overview-manager.js

@@ -173,8 +173,10 @@ class OverviewManager {
     if (!pane) return;
     // Every string-rendered tab follows the per-app detail tab idiom: the
     // shared header (title + actions + divider) on top, then the body inside
-    // the recessed .ov-tab-body container — so the renderers below only ever
-    // produce the body (never a heading or its action buttons).
+    // the flush .ov-tab-body container (one 16px gap under the divider, no
+    // extra inset — same rhythm as the Backups/Migrate sub-tab strips) — so
+    // the renderers below only ever produce the body (never a heading or its
+    // action buttons).
     const checkBtn = (label) => `<button class="updater-btn" data-updater-action="check">↻ ${label}</button>`;
     const body = (html) => `<div class="ov-tab-body">${html}</div>`;
     switch (id) {

containers/libreportal/frontend/core/theme/css/base.css

@@ -514,6 +514,10 @@ html[data-theme="nebula"]::after {
   width: 100%;
   overflow-x: auto;
   scrollbar-color: rgba(var(--text-rgb), 0.4) rgba(var(--text-rgb), 0.08);
+  /* Rounded top corners on the strip itself — the first/last .tab-button
+     carry matching radii, but the bar's own background squares them off
+     without this. Mirrors .tab-navigation's 12px chrome. */
+  border-radius: 12px 12px 0 0;
 }
 
 /* Tabs inside .tabs-wrapper or .tab-navigation share the row evenly so