Merge claude/2

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);

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. -->
+                 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">