style: place catalog status indicators after their labels

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>