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>
This commit is contained in:
librelad 2026-06-17 18:36:25 +01:00
parent 168a8f25f5
commit 82325bce43
3 changed files with 17 additions and 9 deletions

View File

@ -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 {

View File

@ -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}

View File

@ -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>`;
}