diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 02c1c00..d1622b3 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -6634,11 +6634,14 @@ textarea {
 .diagnostics-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+  align-items: start;
   gap: 1rem;
 }
 
 .diagnostic-card {
   display: grid;
+  align-content: start;
+  min-width: 0;
   gap: 1rem;
   padding: 1rem;
   border-radius: 1rem;
diff --git a/scripts/review_diagnostic_layout.cjs b/scripts/review_diagnostic_layout.cjs
new file mode 100644
index 0000000..1de3b96
--- /dev/null
+++ b/scripts/review_diagnostic_layout.cjs
@@ -0,0 +1,22 @@
+// Layout regression fixture using the production styles; no network calls.
+const assert = require('node:assert/strict')
+const path = require('node:path')
+const { chromium } = require(process.env.REVIEW_PLAYWRIGHT || 'playwright')
+;(async () => {
+  const browser = await chromium.launch({ headless: true })
+  try {
+    const page = await browser.newPage()
+    await page.setContent(`<main class="page"><div class="diagnostics-grid">${['Application', 'API', 'Database'].map((name, i) => `<article class="diagnostic-card"><div class="diagnostic-card-top"><h3>${name}</h3></div><div class="diagnostic-meta-grid">${['Target', 'Latency', 'Mode', 'Last checked'].map(label => `<div class="diagnostic-meta-item"><span>${label}</span><strong>Test value</strong></div>`).join('')}</div><div class="diagnostic-message">Check passed</div>${i === 2 ? '<div class="diagnostic-detail-panel">' + '<div class="diagnostic-detail-item">Database statistics</div>'.repeat(20) + '</div>' : ''}</article>`).join('')}</div></main>`)
+    for (const file of ['globals.css', 'ops-redesign.css']) await page.addStyleTag({ path: path.join(__dirname, '../frontend/app', file) })
+    for (const width of [1440, 1000, 390]) {
+      await page.setViewportSize({ width, height: 1000 })
+      const cards = await page.locator('.diagnostic-card').all()
+      const boxes = await Promise.all(cards.map(card => card.boundingBox()))
+      assert.ok(boxes[0].height < boxes[2].height / 2, 'Simple checks must not stretch to database height')
+      const meta = await cards[0].locator('.diagnostic-meta-item').first().boundingBox()
+      assert.ok(meta.height < 100, 'Metadata must stay compact')
+      assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), 'No horizontal overflow')
+    }
+    console.log('Diagnostics layout passed at desktop, tablet and mobile widths.')
+  } finally { await browser.close() }
+})().catch(error => { console.error(error); process.exitCode = 1 })