feat(settings): tidy Maintenance tab into compact tiles + center the views (pass 2)

Goal (operator 2026-06-18): the overview of a Settings tab fits one unscrolled
viewport; expanding a tile to read into it is the only reason to scroll.

- Every Maintenance card converted to the collapsible MaintenanceTile (collapsed
  by default = icon + short title + one-line blurb). Task cards (ML backfill,
  centroids, thumbnails, archive re-extract, missing-file repair, DB maintenance)
  sit in a responsive grid; running tasks auto-expand. Tagging config (suggestion
  thresholds, allowlist, aliases) grouped in one Tagging section as collapsible
  tiles; Backup is its own collapsible tile.
- Three labeled sections mirror the Cleanup tab: Backfills and reprocessing /
  Tagging / Storage.
- Center the whole Settings surface: SettingsView is now a centered, width-capped
  (1140px) column so the tab strip and every panel sit in a tidy centered measure
  (was full-width). CleanupView drops its own left-aligned max-width to fill it.

All card logic unchanged - only the chrome.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/settings/MaintenancePanel.vue

@@ -1,31 +1,43 @@
 <template>
   <div class="fc-maint">
-    <p class="text-body-2 mb-4">
-      Operational backfills and tagging controls. The ML backfill and centroid
-      recompute run nightly automatically; the allowlist auto-applies accepted
-      tags to new and existing images. Use the cards below to trigger a
-      one-off pass.
+    <p class="fc-muted text-body-2 mb-5">
+      One-off backfills, tagging config and storage tools. The ML backfill and
+      centroid recompute also run nightly; the allowlist auto-applies accepted
+      tags. Click a tile to open it.
     </p>
-    <div class="fc-maint__grid">
-      <MLBackfillCard />
-      <CentroidRecomputeCard />
-      <ThumbnailBackfillCard />
-    </div>
-    <MLThresholdSliders class="mt-4" />
-    <AllowlistTable class="mt-4" />
-    <AliasTable class="mt-4" />
-    <DbMaintenanceCard class="mt-6" />
-    <ArchiveReextractCard class="mt-6" />
-    <MissingFileRepairCard class="mt-6" />
-    <BackupCard class="mt-6" />
-    <!-- VideoDedupCard + GatedPurgeCard moved to the Cleanup tab (2026-06-18):
-         both are destructive content cleanup, so "remove unwanted stuff" now
-         lives in one place. -->
-    <!-- TODO(2026-06-18): tile-ify this tab's cards into sections too (pass 2). -->
-    <!-- TagMaintenanceCard moved to Cleanup tab (v26.05.25.7) — it
-         operates on the existing library which fits the Cleanup-tab
-         theme, and clusters with the other audit cards. LegacyMigrationCard
-         removed once the one-and-done GS/IR migration cutover completed. -->
+
+    <section class="fc-section">
+      <h3 class="fc-section__title">Backfills &amp; reprocessing</h3>
+      <p class="fc-section__hint">Re-run tagging, thumbnails, extraction and DB upkeep.</p>
+      <div class="fc-tile-grid">
+        <MLBackfillCard />
+        <CentroidRecomputeCard />
+        <ThumbnailBackfillCard />
+        <ArchiveReextractCard />
+        <MissingFileRepairCard />
+        <DbMaintenanceCard />
+      </div>
+    </section>
+
+    <section class="fc-section">
+      <h3 class="fc-section__title">Tagging</h3>
+      <p class="fc-section__hint">
+        Suggestion thresholds, the auto-apply allowlist and tag aliases.
+      </p>
+      <div class="fc-tile-stack">
+        <MLThresholdSliders />
+        <AllowlistTable />
+        <AliasTable />
+      </div>
+    </section>
+
+    <section class="fc-section">
+      <h3 class="fc-section__title">Storage</h3>
+      <p class="fc-section__hint">Database + image backups and restore.</p>
+      <div class="fc-tile-stack">
+        <BackupCard />
+      </div>
+    </section>
   </div>
 </template>
 
@@ -35,18 +47,18 @@ import { onMounted, onUnmounted } from 'vue'
 import MLBackfillCard from './MLBackfillCard.vue'
 import CentroidRecomputeCard from './CentroidRecomputeCard.vue'
 import ThumbnailBackfillCard from './ThumbnailBackfillCard.vue'
+import ArchiveReextractCard from './ArchiveReextractCard.vue'
+import MissingFileRepairCard from './MissingFileRepairCard.vue'
+import DbMaintenanceCard from './DbMaintenanceCard.vue'
 import MLThresholdSliders from './MLThresholdSliders.vue'
 import AllowlistTable from './AllowlistTable.vue'
 import AliasTable from './AliasTable.vue'
-import DbMaintenanceCard from './DbMaintenanceCard.vue'
-import ArchiveReextractCard from './ArchiveReextractCard.vue'
-import MissingFileRepairCard from './MissingFileRepairCard.vue'
 import BackupCard from './BackupCard.vue'
 import { useSystemActivityStore } from '../../stores/systemActivity.js'
 
-// Poll queue depths so each card's QueueStatusBar shows live pending
-// counts — the operator can see a backfill is already queued/running
-// before re-triggering it.
+// Poll queue depths so each task tile's QueueStatusBar shows live pending
+// counts — the operator can see a backfill is already queued/running before
+// re-triggering it.
 const activity = useSystemActivityStore()
 let qTimer = null
 onMounted(() => {
@@ -61,9 +73,29 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.fc-maint__grid {
+.fc-section { margin-bottom: 24px; }
+.fc-section__title {
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgb(var(--v-theme-accent));
+  margin-bottom: 2px;
+}
+.fc-section__hint {
+  font-size: 0.8rem;
+  color: rgb(var(--v-theme-on-surface-variant));
+  margin-bottom: 12px;
+}
+.fc-tile-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 16px;
+  gap: 14px;
+  align-items: start;
+}
+.fc-tile-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 </style>