From e088abd60a6260f71ad12e5d0ffb108526469b5a Mon Sep 17 00:00:00 2001
From: Codex <codex@users.noreply.github.com>
Date: Sun, 13 Sep 2026 01:44:48 +0200
Subject: [PATCH] style: align catalog status with summary grid

---
 .../2026-09-12-ui-visual-review-delivery.md   |  9 +++++++
 frontend/e2e/ui-visual-review.spec.ts         | 11 ++++++++
 .../database-management/FleetLedgerShell.css  | 25 +++++++++++++------
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/docs/reports/2026-09-12-ui-visual-review-delivery.md b/docs/reports/2026-09-12-ui-visual-review-delivery.md
index 6767dead..4270bdbc 100644
--- a/docs/reports/2026-09-12-ui-visual-review-delivery.md
+++ b/docs/reports/2026-09-12-ui-visual-review-delivery.md
@@ -66,6 +66,15 @@ mirati; coperti ingresso dal Core e dall'Admin, Shift+Enter, testo lungo, mobile
 navigazione con bozza conservata e svuotamento. Build Docker frontend aggiornata;
 branch di revisione isolato, immagine di ripristino invariata.
 
+## Follow-up: griglia di allineamento del catalogo (2026-09-13)
+
+Catalog condivide il margine di Catalog summary; sui layout ampi Metadata updated
+condivide l'asse di Description coverage e Operations occupa il punto medio fra i due.
+Usati margini condivisi e gli stessi cinque riferimenti di colonna dei KPI, senza offset
+assoluti. Sulle larghezze ridotte gli stati continuano a disporsi senza sovrapposizioni.
+Passati 9 scenari Playwright, con assert geometrici sugli allineamenti richiesti.
+Pubblicazione limitata al frontend Docker del worktree di revisione, nessun merge.
+
 ## Verifica
 
 | Verifica | Esito |
diff --git a/frontend/e2e/ui-visual-review.spec.ts b/frontend/e2e/ui-visual-review.spec.ts
index 3b9cf4ea..7cd60b87 100644
--- a/frontend/e2e/ui-visual-review.spec.ts
+++ b/frontend/e2e/ui-visual-review.spec.ts
@@ -151,6 +151,17 @@ for (const width of [390, 649, 768, 1280, 1600]) {
       if (name === "Database") {
         const statuses = page.locator(".thot-fleet-ledger__header-status .thot-fleet-ledger__status-item");
         await expect(statuses).toHaveCount(3);
+        const catalog = await statuses.nth(0).boundingBox();
+        const operations = await statuses.nth(1).boundingBox();
+        const metadata = await statuses.nth(2).boundingBox();
+        const summary = await page.locator(".thot-fleet-ledger__kpi-section > h2").boundingBox();
+        expect(Math.abs(catalog!.x - summary!.x)).toBeLessThan(1);
+        const workArea = await page.locator(".thot-fleet-ledger__workspace").boundingBox();
+        if (workArea!.width >= 768) {
+          const coverage = await page.locator(".thot-fleet-ledger__kpi-label").filter({ hasText: "Description coverage" }).boundingBox();
+          expect(Math.abs(metadata!.x - coverage!.x)).toBeLessThan(1);
+          expect(Math.abs(operations!.x - (catalog!.x + metadata!.x) / 2)).toBeLessThan(1);
+        }
         for (const status of await statuses.all()) {
           const label = await status.locator(".thot-fleet-ledger__status-label > span:first-child").boundingBox();
           const mark = await status.locator(".thot-fleet-ledger__status-mark").boundingBox();
diff --git a/frontend/src/shell/database-management/FleetLedgerShell.css b/frontend/src/shell/database-management/FleetLedgerShell.css
index d85f6126..1cb233e4 100644
--- a/frontend/src/shell/database-management/FleetLedgerShell.css
+++ b/frontend/src/shell/database-management/FleetLedgerShell.css
@@ -14,6 +14,7 @@
 }
 
 .thot-fleet-ledger__workspace {
+  --fleet-summary-inset: 1.25rem;
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -101,6 +102,7 @@
 .thot-fleet-ledger__header-status {
   grid-area: status;
   min-width: 0;
+  padding-inline: var(--fleet-summary-inset);
 }
 
 .thot-fleet-ledger__header-status > .thot-fleet-ledger__status {
@@ -154,8 +156,6 @@
   min-width: min(100%, 10rem);
   gap: 0.5rem;
   align-items: flex-start;
-  /* Preserve the text inset formerly occupied by the leading marker and gap. */
-  padding-inline-start: 0.95rem;
 }
 
 .thot-fleet-ledger__status-item[data-tone="success"] {
@@ -221,7 +221,7 @@
 .thot-fleet-ledger__kpi-section {
   display: grid;
   gap: 0.625rem;
-  padding: 0.75rem 1.25rem 0;
+  padding: 0.75rem var(--fleet-summary-inset) 0;
   border-bottom: 1px solid oklch(var(--border));
   background: oklch(var(--card));
 }
@@ -813,6 +813,9 @@
 }
 
 @media (min-width: 64rem) {
+  .thot-fleet-ledger__workspace {
+    --fleet-summary-inset: 1.5rem;
+  }
   .thot-fleet-ledger__header {
     padding-inline: 1.5rem;
   }
@@ -823,10 +826,6 @@
     padding-inline: 1.5rem;
   }
 
-  .thot-fleet-ledger__kpi-section {
-    padding-inline: 1.5rem;
-  }
-
   .thot-fleet-ledger__navigation,
   .thot-fleet-ledger__command-bar {
     padding-inline: 1.25rem;
@@ -834,6 +833,18 @@
 
 }
 
+/* Share the KPI grid's first, middle and last column anchors on wide work areas. */
+@container fleet-workspace (min-width: 48rem) {
+  .thot-fleet-ledger__header-status .thot-fleet-ledger__status-list {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    column-gap: 0;
+  }
+
+  .thot-fleet-ledger__header-status .thot-fleet-ledger__status-item:nth-child(-n + 2) {
+    grid-column: span 2;
+  }
+}
+
 @container fleet-surface (max-width: 47.999rem) {
   .thot-fleet-ledger__drawer,
   .thot-fleet-ledger .thot-fleet-ledger__context-panel {