From 0f2a37cb3907ababcfe0159dd6224d87dbac81d0 Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sat, 28 Mar 2026 12:28:44 -0400
Subject: [PATCH] fix: centre badge text on instance cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.badge lacked text-align: center. Inside the card's flex-end right
column, badge text was left-justified within each pill, making state
labels (deployed / testing / degraded) appear skewed to the left.

TDD: CSS regression test added to tests/helpers.test.js — reads
css/app.css directly and asserts the rule is present, so this
cannot regress silently in future.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 css/app.css           |  1 +
 tests/helpers.test.js | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/css/app.css b/css/app.css
index eff8043..d21a23a 100644
--- a/css/app.css
+++ b/css/app.css
@@ -289,6 +289,7 @@ select:focus { border-color: var(--accent); }
   border-radius: 3px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
+  text-align: center;
 }
 
 .badge.deployed    { background: var(--accent2); color: var(--accent); }
diff --git a/tests/helpers.test.js b/tests/helpers.test.js
index dc3a809..69008a6 100644
--- a/tests/helpers.test.js
+++ b/tests/helpers.test.js
@@ -1,5 +1,7 @@
 // @vitest-environment jsdom
 import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'fs'
+import { join } from 'path'
 
 // ── esc() ─────────────────────────────────────────────────────────────────────
 // Mirrors the implementation in ui.js exactly (DOM-based).
@@ -112,3 +114,16 @@ describe('fmtDateFull', () => {
     expect(fmtDateFull('')).toBe('—')
   })
 })
+
+// ── CSS regressions ───────────────────────────────────────────────────────────
+
+const css = readFileSync(join(__dirname, '../css/app.css'), 'utf8')
+
+describe('CSS regressions', () => {
+  it('.badge has text-align: center so state labels are not left-skewed on cards', () => {
+    // Regression: badges rendered left-aligned inside the card's flex-end column.
+    // Without text-align: center, short labels (e.g. "deployed") appear
+    // left-justified inside their pill rather than centred.
+    expect(css).toMatch(/\.badge\s*\{[^}]*text-align\s*:\s*center/s)
+  })
+})