diff --git a/containers/libreportal/frontend/components/apps/overview/css/overview.css b/containers/libreportal/frontend/components/apps/overview/css/overview.css index cd09236..cfe6ed1 100644 --- a/containers/libreportal/frontend/components/apps/overview/css/overview.css +++ b/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; diff --git a/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js b/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js index f076cab..919d536 100644 --- a/containers/libreportal/frontend/components/apps/overview/js/overview-manager.js +++ b/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) => ``; const body = (html) => `