From 172a2dac9eebabed7749a920e383a96013aaab4e Mon Sep 17 00:00:00 2001
From: Matt Faltyn <faltyn.matthew@gmail.com>
Date: Sun, 27 Sep 2026 23:52:35 +0200
Subject: [PATCH] Keep narrow expiry dates on one line

---
 frontend/e2e/responsive-expiry.spec.ts | 17 +++++++++++++++++
 frontend/src/index.css                 |  1 +
 2 files changed, 18 insertions(+)
 create mode 100644 frontend/e2e/responsive-expiry.spec.ts

diff --git a/frontend/e2e/responsive-expiry.spec.ts b/frontend/e2e/responsive-expiry.spec.ts
new file mode 100644
index 0000000..115e19c
--- /dev/null
+++ b/frontend/e2e/responsive-expiry.spec.ts
@@ -0,0 +1,17 @@
+import { expect, test } from "@playwright/test"
+
+for (const width of [320, 390]) {
+  test(`keeps expiry dates on one line at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 800 })
+    await page.goto("/")
+    const heading = page.locator(".expiry-heading").first()
+    await expect(heading).toBeVisible()
+    const lines = await heading.locator(".expiry-trigger > span").first().evaluate((span) => {
+      const range = document.createRange()
+      range.selectNodeContents(span)
+      return range.getClientRects().length
+    })
+    expect(lines).toBe(1)
+    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width)
+  })
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 290cfb8..fed7adc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -919,6 +919,7 @@
     color: var(--foreground);
     font-weight: 720;
     text-align: left;
+    white-space: nowrap;
   }
   .expiry-chevron { width: 16px; flex: none; transition: transform 160ms ease; }
   .expiry-trigger[aria-expanded="true"] .expiry-chevron { transform: rotate(90deg); }