From 0641a9b7901f713ba16bb66e0109a6c3a8a1f659 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Wed, 17 Jun 2026 18:23:49 +0100
Subject: [PATCH] style(webui): wrap admin dashboard cards + task list in
 recessed panel

Match the fleet Overview's .ov-tab-body treatment: the /admin/dashboard
card grid (under the header divider) and the /tasks list now sit inside a
recessed dark rounded box instead of floating directly on the page
gradient.

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

diff --git a/containers/libreportal/frontend/components/admin/core/css/admin.css b/containers/libreportal/frontend/components/admin/core/css/admin.css
index 2a3eba2..1913e6a 100644
--- a/containers/libreportal/frontend/components/admin/core/css/admin.css
+++ b/containers/libreportal/frontend/components/admin/core/css/admin.css
@@ -17,12 +17,21 @@
     margin-bottom: 2px;
 }
 
+/* Recessed dark panel holding the overview cards, 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 {
+    margin-top: 16px;
+    padding: 16px;
+    background: rgba(var(--bg-rgb), 0.2);
+    border-radius: 8px;
+}
+
 /* Overview cards */
 .admin-card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 16px;
-    margin-top: 8px;
 }
 
 .admin-card {
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 d5f28a4..9665875 100644
--- a/containers/libreportal/frontend/components/admin/overview/js/overview-page.js
+++ b/containers/libreportal/frontend/components/admin/overview/js/overview-page.js
@@ -243,11 +243,13 @@ 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">
-                    ${updCard}
-                    ${backupCard}
-                    ${sshCard}
-                    ${sysCard}
+                <div class="admin-card-grid-wrap">
+                    <div class="admin-card-grid">
+                        ${updCard}
+                        ${backupCard}
+                        ${sshCard}
+                        ${sysCard}
+                    </div>
                 </div>
             </div>`;
     }
diff --git a/containers/libreportal/frontend/components/tasks/css/tasks.css b/containers/libreportal/frontend/components/tasks/css/tasks.css
index c8dd65b..3f918c9 100644
--- a/containers/libreportal/frontend/components/tasks/css/tasks.css
+++ b/containers/libreportal/frontend/components/tasks/css/tasks.css
@@ -204,10 +204,17 @@
   flex-direction: column;
 }
 
+/* Recessed dark panel holding the task list — same recipe as the fleet
+   Overview's .ov-tab-body / the per-app .tasks-container, so the list reads
+   as a contained box under the status-bar strip rather than floating on the
+   page gradient. */
 .tasks-list {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
+  margin: 16px;
+  background: rgba(var(--bg-rgb), 0.2);
+  border-radius: 8px;
 }
 
 /* Hide scrollbar when not needed, show only when scrolling */