From 78b71901f0d48338820e5c793120437f592e8a80 Mon Sep 17 00:00:00 2001
From: Nicholas Petrasek <nicholas.petrasek@gmail.com>
Date: Thu, 1 Oct 2026 10:49:52 +0200
Subject: [PATCH] fix: wrap homepage onward links on mobile

---
 test/browser/website.spec.ts | 33 +++++++++++++++++++++++++++++++++
 website/story.css            |  3 +++
 2 files changed, 36 insertions(+)

diff --git a/test/browser/website.spec.ts b/test/browser/website.spec.ts
index edbd224..b258d8d 100644
--- a/test/browser/website.spec.ts
+++ b/test/browser/website.spec.ts
@@ -1,6 +1,39 @@
 import { test, expect } from '@playwright/test'
 import AxeBuilder from '@axe-core/playwright'
 
+for (const initialWidth of [320, 1440]) {
+  test(`homepage fits 320px after loading at ${initialWidth}px`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: initialWidth, height: 1000 })
+    await page.goto('/')
+    const support = page.getByRole('region', {
+      name: 'Useful in your project?',
+      exact: true,
+    })
+    await support.scrollIntoViewIfNeeded()
+    for (const name of ['Star on GitHub', 'Explore NIPE Open Source']) {
+      await support.getByRole('link', { name, exact: true }).focus()
+    }
+    await page.setViewportSize({ width: 320, height: 1000 })
+    await support.scrollIntoViewIfNeeded()
+    for (const name of ['Star on GitHub', 'Explore NIPE Open Source']) {
+      await support.getByRole('link', { name, exact: true }).focus()
+    }
+    const layout = await page.evaluate(() => ({
+      viewport: document.documentElement.clientWidth,
+      scroll: document.documentElement.scrollWidth,
+    }))
+    expect(layout.viewport).toBe(320)
+    expect(layout.scroll).toBeLessThanOrEqual(layout.viewport)
+    if (process.env.CTA_SCREENSHOT_DIR) {
+      await page.locator('.onward').screenshot({
+        path: `${process.env.CTA_SCREENSHOT_DIR}/onward-${initialWidth}-to-320-${test.info().project.name}.png`,
+      })
+    }
+  })
+}
+
 for (const width of [1280, 390, 320]) {
   test(`homepage support links remain usable at ${width}px`, async ({
     page,
diff --git a/website/story.css b/website/story.css
index ff7510f..c7a4223 100644
--- a/website/story.css
+++ b/website/story.css
@@ -597,6 +597,9 @@ footer nav {
   .hero {
     grid-template-columns: 1fr;
   }
+  .onward .hero-links {
+    flex-wrap: wrap;
+  }
   .hero h1 {
     font-size: clamp(38px, 9vw, 52px);
   }