refactor(overview): de-chrome the embedded Backups + Peers sub-tabs

The Backups tab's embedded BackupPage repeated the active section as a
big page header (icon + 'Dashboard' + subtitle) right under the nested
strip that already names it. Embedded-scoped CSS now hides the title
block and flips the header below the body (flex order), so its actions
(Refresh + per-section primary) become a bottom-left footer row — the
same place app-detail tabs keep theirs. The export dropdown flips to
open upward from the footer. The standalone /backup page is untouched.

The Migrate ▸ Peers sub-tab drops its page header (breadcrumb + title
+ blurb) the same way: the peer list/empty state now sit in the shared
recessed .ov-tab-body container with the four actions in a bottom-left
.peers-actions footer.

Signed-off-by: librelad <librelad@digitalangels.vip>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

containers/libreportal/frontend/components/admin/peers/html/peers-content.html

@@ -1,11 +1,20 @@
 <div class="peers-page">
-  <div class="page-header config-page-header">
+  <!-- No page header: this fragment renders inside the Overview ▸ Migrate ▸
-    <div class="page-header-title">
+       Peers sub-tab, whose strip already names the section. The peer list
-      <div class="admin-breadcrumb">Tools</div>
+       sits in the shared recessed container and the actions live in a
-      <h1>Peers</h1>
+       bottom-left footer row, like every app-detail tab. -->
-      <p>Named references to other LibrePortal instances. Use them in the Migrate tab to pull apps across without typing hostnames.</p>
+  <div class="ov-tab-body peers-body">
+    <div class="peers-empty" id="peers-empty" hidden style="padding:24px; text-align:center; opacity:.75">
+      <p>No peers yet.</p>
+      <p class="backup-card-hint">
+        Add one to give a memorable name to another LibrePortal you share a backup location with.
+        Or use <strong>Show my token</strong> / <strong>Pair with token</strong> for direct-SSH peers.
+      </p>
     </div>
-    <div class="page-header-actions">
+    <div class="peers-list" id="peers-list"></div>
+  </div>
+
+  <div class="peers-actions" id="peers-actions">
     <button class="backup-refresh-btn" id="peers-refresh-btn" title="Refresh">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <polyline points="23 4 23 10 17 10"></polyline>
@@ -35,17 +44,6 @@
       Add backup-channel peer
     </button>
   </div>
-  </div>
-
-  <div class="peers-empty" id="peers-empty" hidden style="padding:24px; text-align:center; opacity:.75">
-    <p>No peers yet.</p>
-    <p class="backup-card-hint">
-      Add one to give a memorable name to another LibrePortal you share a backup location with.
-      Or use <strong>Show my token</strong> / <strong>Pair with token</strong> for direct-SSH peers.
-    </p>
-  </div>
-
-  <div class="peers-list" id="peers-list" style="padding-top:8px"></div>
 </div>
 
 <div class="backup-modal" id="peers-add-modal">

containers/libreportal/frontend/components/apps/overview/css/overview.css

@@ -223,6 +223,35 @@
   background: var(--card-bg);
   border-radius: 0 0 12px 12px;
 }
+/* Embedded, the nested strip already names the section — BackupPage's big
+   page header (icon + h1 + subtitle) is redundant chrome. Hide the title
+   block and flip the header below the body via flex order, so its action
+   buttons (Refresh + the per-section primary) become a bottom-LEFT footer
+   row — the same place the app-detail tabs put theirs (.config-actions). */
+#overview-view #ov-pane-backups .backup-page-section {
+  display: flex;
+  flex-direction: column;
+}
+#overview-view #ov-pane-backups .backup-page-section > .page-header {
+  order: 2;
+  border-bottom: none;
+  border-top: 1px solid rgba(var(--text-rgb), 0.08);
+  margin-bottom: 0;
+  padding: 16px 22px;
+}
+#overview-view #ov-pane-backups .backup-page-section > .page-header .page-header-icon-slot,
+#overview-view #ov-pane-backups .backup-page-section > .page-header .page-header-title {
+  display: none;
+}
+#overview-view #ov-pane-backups .backup-page-body { order: 1; }
+/* The export dropdown anchors below the actions; with the actions now at the
+   card's bottom edge it must open upward (and leftward) to stay on the card. */
+#overview-view #ov-pane-backups .backup-page-section > .page-header .backup-export-menu {
+  top: auto;
+  bottom: calc(100% + 6px);
+  right: auto;
+  left: 0;
+}
 
 /* ---- Migrate tab: segmented sub-tabs (per-app Config-tab design) -------- */
 /* .tabs-wrapper/.tabs-list/.tabs-content/.tab-button come from base.css; the
@@ -231,6 +260,17 @@
 #overview-view .ov-subtabs-content .tab-panel { display: none; }
 #overview-view .ov-subtabs-content .tab-panel.active { display: block; }
 
+/* Peers sub-tab: actions footer at the bottom left, mirroring the app-detail
+   tabs' .config-actions row. Left padding lines the buttons up with the
+   .ov-tab-body container's 16px inset above. */
+#overview-view .peers-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0 16px 16px;
+}
+
 /* ---- per-app Updates tab (app-detail) ----------------------------------- */
 /* Same idiom as the Config / Backups / Tasks tabs: a title block (icon + h3 +
    description, with a bottom-border divider) followed by a recessed dark