fix: make tab bar horizontally scrollable on mobile

docs/prd/bundler.md

@@ -91,12 +91,12 @@ Reasons:
 
 ### What changes
 
-1. **`esbuild` devDependency** added (`^0.28.0`).
+1. **`esbuild` devDependency** added (`0.28.0`).
 2. **`scripts/build-js.js`** — concatenation unchanged; esbuild minifies the
    result in-process before writing `script.js`.
 3. **`scripts/build-css.js`** — same pattern; esbuild minifies before writing
    `styles.css`.
-4. **`package.json`** — new `build` convenience script runs all six build
+4. **`package.json`** — new `build` convenience script runs all five build
    steps in sequence.
 5. **Deploy workflow** — unchanged; `npm run build:js` and `npm run build:css`
    now produce minified output automatically.

scripts/build-js.js

@@ -80,8 +80,6 @@ const outPath = path.join(ROOT, 'script.js');
 // Minify with esbuild (synchronous transform API — no temp files needed).
 const result = esbuild.transformSync(unminified, {
   minify:       true,
-  // Keep the IIFE wrapper intact; tell esbuild the code is already IIFE-wrapped.
-  globalName:   undefined,
   // Preserve the leading banner comment so tools can still identify the file.
   banner:       '/* AI DEATH CLOCK — browser/DOM layer (minified) */',
   // Target all modern browsers; no transpilation needed.

styles/hero-tabs.css

@@ -50,6 +50,13 @@ header::after {
   position: sticky;
   top: 0;
   z-index: 900;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none; /* Firefox */
+}
+
+.tab-bar::-webkit-scrollbar {
+  display: none; /* Chrome / Safari */
 }
 
 .tab-btn {
@@ -66,6 +73,22 @@ header::after {
   padding: 0.85rem 1.25rem;
   cursor: pointer;
   transition: color 0.2s, border-color 0.2s;
+  flex-shrink: 0; /* prevent tabs from compressing on narrow screens */
+  white-space: nowrap;
+}
+
+/* ---- Tab Bar — Mobile ---- */
+@media (max-width: 600px) {
+  .tab-bar {
+    padding: 0 0.5rem;
+    /* Extra right padding so the last tab clears the fixed theme-toggle button */
+    padding-right: 8rem;
+  }
+
+  .tab-btn {
+    padding: 0.75rem 0.85rem;
+    font-size: 0.7rem;
+  }
 }
 
 .tab-btn:hover {

tests/e2e/death-clock.spec.js

@@ -289,3 +289,44 @@ test.describe('AI Death Clock — end-to-end', () => {
     expect(html).not.toContain('javascript:');
   });
 });
+
+// ── Mobile tab-bar visibility ─────────────────────────────────────────────────
+
+test.describe('Mobile tab bar — 375 px viewport', () => {
+  test.use({ viewport: { width: 375, height: 667 } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+  });
+
+  test('all four tab buttons are present in the DOM at mobile width', async ({ page }) => {
+    const tabs = ['dashboard', 'news', 'about', 'changelog'];
+    for (const tab of tabs) {
+      await expect(page.locator(`#tab-btn-${tab}`)).toHaveCount(1);
+    }
+  });
+
+  test('tab bar is horizontally scrollable when tabs overflow', async ({ page }) => {
+    // scrollWidth > clientWidth means the bar has scrollable overflow
+    const isScrollable = await page.evaluate(() => {
+      const bar = document.querySelector('.tab-bar');
+      return bar.scrollWidth > bar.clientWidth;
+    });
+    expect(isScrollable).toBe(true);
+  });
+
+  test('each tab button is clickable and activates the correct panel', async ({ page }) => {
+    const tabs = [
+      { btn: '#tab-btn-news',      panel: '#tab-news' },
+      { btn: '#tab-btn-about',     panel: '#tab-about' },
+      { btn: '#tab-btn-changelog', panel: '#tab-changelog' },
+    ];
+    for (const { btn, panel } of tabs) {
+      // Scroll the button into view inside the tab bar before clicking
+      await page.locator(btn).scrollIntoViewIfNeeded();
+      await page.locator(btn).click();
+      await expect(page.locator(panel)).not.toHaveAttribute('hidden', /.*/);
+    }
+  });
+});