From 82325bce43e005f5cddd4690f6e76f325630af33 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Wed, 17 Jun 2026 18:36:25 +0100
Subject: [PATCH] style(webui): wrap /admin/system body in the recessed admin
 panel

Apply the same recessed-panel treatment as the Dashboard/Tasks to the
System page: gauges, Trends, Storage, Host and Per-app now sit inside one
dark rounded box under the header divider. Generalise the Dashboard's
.admin-card-grid-wrap into a shared .admin-panel class so both admin pages
use one source of truth.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../frontend/components/admin/core/css/admin.css     | 12 +++++++++---
 .../components/admin/overview/js/overview-page.js    |  2 +-
 .../components/admin/system/js/system-page.js        | 12 +++++++-----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/containers/libreportal/frontend/components/admin/core/css/admin.css b/containers/libreportal/frontend/components/admin/core/css/admin.css
index 1913e6a..2d31d16 100644
--- a/containers/libreportal/frontend/components/admin/core/css/admin.css
+++ b/containers/libreportal/frontend/components/admin/core/css/admin.css
@@ -17,15 +17,21 @@
     margin-bottom: 2px;
 }
 
-/* Recessed dark panel holding the overview cards, under the header divider —
+/* Recessed dark panel holding an admin page's body under the header divider —
    same recipe as the fleet Overview's .ov-tab-body and the per-app
-   .tasks-container, so the admin board reads like the other tabbed areas. */
-.admin-card-grid-wrap {
+   .tasks-container, so admin pages read like the other tabbed areas. Shared by
+   the Dashboard (card grid) and System (gauges/trends/storage/host/apps). */
+.admin-panel {
     margin-top: 16px;
     padding: 16px;
     background: rgba(var(--bg-rgb), 0.2);
     border-radius: 8px;
 }
+/* The System panel leads with the gauges row, whose own top margin is now
+   redundant with the panel padding — drop it so the box hugs the gauges.
+   (The section heads below keep their margins so Trends/Storage/Host/Per-app
+   stay separated.) */
+.admin-panel > .sys-gauges { margin-top: 0; }
 
 /* Overview cards */
 .admin-card-grid {
diff --git a/containers/libreportal/frontend/components/admin/overview/js/overview-page.js b/containers/libreportal/frontend/components/admin/overview/js/overview-page.js
index 9665875..780c979 100644
--- a/containers/libreportal/frontend/components/admin/overview/js/overview-page.js
+++ b/containers/libreportal/frontend/components/admin/overview/js/overview-page.js
@@ -243,7 +243,7 @@ class OverviewPage {
                         <p>System health and admin status at a glance. Manage anything from the cards below.</p>
                     </div>
                 </div>
-                <div class="admin-card-grid-wrap">
+                <div class="admin-panel">
                     <div class="admin-card-grid">
                         ${updCard}
                         ${backupCard}
diff --git a/containers/libreportal/frontend/components/admin/system/js/system-page.js b/containers/libreportal/frontend/components/admin/system/js/system-page.js
index dcef39e..6436c25 100644
--- a/containers/libreportal/frontend/components/admin/system/js/system-page.js
+++ b/containers/libreportal/frontend/components/admin/system/js/system-page.js
@@ -334,11 +334,13 @@ class SystemPage {
                         <p>Live host and per-app statistics. Updated ${updated}.</p>
                     </div>
                 </div>
-                ${gauges}
-                ${charts}
-                ${this._storageSection()}
-                ${infoStrip}
-                ${appsTable}
+                <div class="admin-panel">
+                    ${gauges}
+                    ${charts}
+                    ${this._storageSection()}
+                    ${infoStrip}
+                    ${appsTable}
+                </div>
             </div>`;
     }