style: place catalog status indicators after their labels

docs/reports/2026-09-12-ui-visual-review-delivery.md

@@ -42,6 +42,15 @@ Docker usando il medesimo tag di revisione; immagine di ripristino invariata, ne
 La nuova immagine sostituisce quella identificata nella prima consegna sotto:
 `sha256:f576ee4882456b4d2d338dbb2228d301f9ffd8d0c7de541842c767bbe8d02dad`.
 
+## Follow-up: indicatori del catalogo (2026-09-13)
+
+Spostati i pallini dopo le etichette Catalog, Operations e Metadata updated, mantenendo
+il rientro del testo e l'allineamento con i valori sottostanti. Spaziatura uniforme e
+centratura verticale secondo Impeccable. I 7 scenari Playwright passano, inclusi nuovi
+controlli geometrici per tutte e tre le etichette alle cinque larghezze responsive.
+Il successivo aggiornamento del medesimo tag frontend include questa correzione;
+il digest del follow-up precedente identifica quindi una versione superata.
+
 ## Verifica
 
 | Verifica | Esito |

frontend/e2e/ui-visual-review.spec.ts

@@ -104,6 +104,17 @@ for (const width of [390, 649, 768, 1280, 1600]) {
       await expect(heading).toHaveCSS("font-size", "24px");
       expect(await inspect(page)).toEqual({ overflow: 0, serif: [], tiny: [] });
       if (name === "Memory") await expect(page.getByText("No memory cards yet.", { exact: false })).toBeVisible();
+      if (name === "Database") {
+        const statuses = page.locator(".thot-fleet-ledger__header-status .thot-fleet-ledger__status-item");
+        await expect(statuses).toHaveCount(3);
+        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();
+          const value = await status.locator(".thot-fleet-ledger__status-value").boundingBox();
+          expect(mark!.x - (label!.x + label!.width)).toBeGreaterThanOrEqual(7);
+          expect(Math.abs(label!.x - value!.x)).toBeLessThan(1);
+        }
+      }
       if (name === "Evidence") {
         const search = await page.getByRole("textbox", { name: "Search Evidence" }).boundingBox();
         expect(search!.width).toBeGreaterThan(180);

frontend/src/shell/database-management/FleetLedgerShell.css

@@ -154,6 +154,8 @@
   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"] {
@@ -175,7 +177,6 @@
 .thot-fleet-ledger__status-mark {
   width: 0.45rem;
   height: 0.45rem;
-  margin-top: 0.33rem;
   flex: 0 0 auto;
   border-radius: 999px;
   background: var(--fleet-status-color);
@@ -191,6 +192,9 @@
 
 .thot-fleet-ledger__status-label {
   grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   font-size: var(--text-meta);
 }
 

frontend/src/shell/database-management/FleetLedgerShell.tsx

@@ -159,9 +159,11 @@ export function FleetLedgerRealStatus({
             className="thot-fleet-ledger__status-item"
             data-tone={item.tone ?? "neutral"}
           >
-            <span className="thot-fleet-ledger__status-mark" aria-hidden="true" />
             <span className="thot-fleet-ledger__status-copy">
-              <span className="thot-fleet-ledger__status-label">{item.label}</span>
+              <span className="thot-fleet-ledger__status-label">
+                <span>{item.label}</span>
+                <span className="thot-fleet-ledger__status-mark" aria-hidden="true" />
+              </span>
               <strong className="thot-fleet-ledger__status-value">{item.value}</strong>
               {item.detail ? (
                 <span className="thot-fleet-ledger__status-detail">{item.detail}</span>