From 6148a6597e8096a4c75509e8785ba4a92527436f Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Tue, 7 Jul 2026 20:47:03 +0100
Subject: [PATCH] fix(backup/webui): wrap the global Backups tab list in a
 themed box

The global Backups tab rendered its snapshot list (and the "No backups
yet." empty state) as a bare flex column directly on the tab panel, so
the list section had no visual container -- unlike the Dashboard tab's
cards and the per-app Backups tab's recessed panel. Wrap it in a
.backup-snapshot-panel box (translucent fill + hairline border, matching
.backup-card) so the section reads as a bounded surface.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/backup/core/css/backup.css       | 17 +++++++++++++++++
 .../backup/core/html/backup-content.html        |  9 +++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/containers/libreportal/frontend/components/backup/core/css/backup.css b/containers/libreportal/frontend/components/backup/core/css/backup.css
index 738251b..ca99624 100755
--- a/containers/libreportal/frontend/components/backup/core/css/backup.css
+++ b/containers/libreportal/frontend/components/backup/core/css/backup.css
@@ -1281,12 +1281,29 @@
     color: rgba(var(--text-rgb), 0.5);
 }
 
+/* Themed box wrapping the global Backups tab snapshot list, so the list
+   section — including the "No backups yet." empty state — reads as its own
+   bounded surface instead of floating bare on the tab panel. Same recipe as
+   the Dashboard tab's .backup-card (translucent fill + hairline border). */
+.backup-snapshot-panel {
+    background: rgba(var(--text-rgb), 0.03);
+    border: 1px solid rgba(var(--text-rgb), 0.08);
+    border-radius: 12px;
+    padding: 8px 16px 16px;
+}
+
 .backup-snapshot-rows {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-top: 14px;
 }
+
+/* Inside the panel the top inset comes from the panel padding, so drop the
+   list's own top margin to keep the box's internal rhythm even. */
+.backup-snapshot-panel .backup-snapshot-rows {
+    margin-top: 0;
+}
 .backup-snapshot-loc-pill {
     background: rgba(var(--accent-rgb), 0.15);
     color: var(--accent);
diff --git a/containers/libreportal/frontend/components/backup/core/html/backup-content.html b/containers/libreportal/frontend/components/backup/core/html/backup-content.html
index 358aa12..31eec4d 100644
--- a/containers/libreportal/frontend/components/backup/core/html/backup-content.html
+++ b/containers/libreportal/frontend/components/backup/core/html/backup-content.html
@@ -57,8 +57,13 @@
             </div>
             <!-- Each backup is rendered by renderSnapshots() as a .task-item
                  card, matching the per-app Backups tab so the two surfaces
-                 share one visual language. -->
-            <div class="backup-snapshot-rows" id="backup-snapshot-list"></div>
+                 share one visual language. The panel wrapper gives the list
+                 section its own themed box so it reads as a bounded surface
+                 (and the "No backups yet." empty state sits inside a box
+                 rather than floating bare on the tab panel). -->
+            <div class="backup-snapshot-panel">
+              <div class="backup-snapshot-rows" id="backup-snapshot-list"></div>
+            </div>
           </section>
 
           <section class="backup-tabpanel" id="backup-panel-locations">