From c16f37c9f79177d3c409b137d160ddbd50ed2e81 Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Sat, 15 Aug 2026 21:27:40 +0800
Subject: [PATCH] Fix mobile forms information overflow

---
 src/components/forms/form-detail-page.tsx |  2 +-
 tests/ui-forms-section-nav.spec.ts        | 24 +++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/form-detail-page.tsx b/src/components/forms/form-detail-page.tsx
index 35e057ad48..f98a06840e 100644
--- a/src/components/forms/form-detail-page.tsx
+++ b/src/components/forms/form-detail-page.tsx
@@ -1122,7 +1122,7 @@ export function FormDetailPage({ form }: { form: FormRecord }) {
             </section>
 
             <section id="form-information" aria-label="Form information" className={cn(inPageAnchor, "grid gap-2")}>
-              <DisclosureGroup items={formInformationItems(detailRows)} headingLevel={3} />
+              <DisclosureGroup className="min-w-0" items={formInformationItems(detailRows)} headingLevel={3} />
             </section>
 
             {/* The `-mobile`/`-desktop` id pairs below are the section anchors
diff --git a/tests/ui-forms-section-nav.spec.ts b/tests/ui-forms-section-nav.spec.ts
index 3579c4a040..af3ba84732 100644
--- a/tests/ui-forms-section-nav.spec.ts
+++ b/tests/ui-forms-section-nav.spec.ts
@@ -26,6 +26,30 @@ const FORM_ROUTE = "/forms/transport-crisis-form";
 
 // Adoption evidence: these browser regressions exercise DisclosureGroup.items[].extendDescription.
 test.describe("Forms section navigation", () => {
+  test("keeps information rows inside the mobile viewport", async ({ page }) => {
+    for (const width of [320, 390, 639]) {
+      await page.setViewportSize({ width, height: 844 });
+      await page.goto(FORM_ROUTE, { waitUntil: "domcontentloaded" });
+
+      const section = page.getByRole("region", { name: "Form information" });
+      await expect(section).toBeVisible({ timeout: 20_000 });
+
+      const geometry = await section.locator('[data-testid="disclosure"]').evaluateAll((rows) =>
+        rows.map((row) => {
+          const bounds = row.getBoundingClientRect();
+          return { left: bounds.left, right: bounds.right, width: bounds.width };
+        }),
+      );
+
+      expect(geometry.length).toBeGreaterThan(0);
+      for (const row of geometry) {
+        expect(row.left, `${width}px row must not cross the left viewport edge`).toBeGreaterThanOrEqual(0);
+        expect(row.right, `${width}px row must not cross the right viewport edge`).toBeLessThanOrEqual(width + 1);
+        expect(row.width, `${width}px row must retain a usable width`).toBeGreaterThan(0);
+      }
+    }
+  });
+
   test("expands information previews into one continuous answer", async ({ page }) => {
     await page.setViewportSize({ width: 390, height: 844 });
     await page.goto(FORM_ROUTE, { waitUntil: "domcontentloaded" });