Fix mobile overflow on Forms information page

[BigSimmo]

Motivation

• Long disclosure content in the Forms information section could force the disclosure rows wider than the mobile viewport, producing right-edge overflow and clipped content.
• The failure reproduced in a real Chromium run and required a small layout constraint so disclosure children can shrink inside grid/flex containers.

Description

• Add min-w-0 to the DisclosureGroup wrapper so its children may shrink: update src/components/forms/form-detail-page.tsx (wrap DisclosureGroup with className="min-w-0").
• Add a focused Playwright Chromium regression test that checks disclosure rows remain inside phone widths 320, 390, and 639 px: update tests/ui-forms-section-nav.spec.ts with keeps information rows inside the mobile viewport.
• Change is intentionally minimal and scoped to the disclosure wrapper so print behaviour and desktop layout remain unchanged.

Testing

• Ran the focused Chromium e2e test: npm run test:e2e:critical -- tests/ui-forms-section-nav.spec.ts --project=chromium --grep "keeps information rows" and the new test passed (1 passed).
• Ran npm run format and git diff --check to ensure formatting and no diff-check failures, both completed successfully.
• Confirmed the local app identity via curl http://localhost:3131/api/local-project-id and inspected the rendered page with Playwright at 390px (screenshot taken) to verify no horizontal overflow on mobile viewports.

---

Codex Task

Summary by CodeRabbit

• Bug Fixes

  • Improved form information layout behavior on narrow screens.
  • Ensured disclosure rows remain visible and contained within the viewport across common mobile widths.

• Tests

  • Added responsive browser coverage for viewport widths from 320 to 639 pixels.

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e0d6df67-91d7-4afe-b410-f3e875244e2e

📥 Commits

Reviewing files that changed from the base of the PR and between 2e3ac49 and 8d40eae.

📒 Files selected for processing (2)

• src/components/forms/form-detail-page.tsx
• tests/ui-forms-section-nav.spec.ts

---

📝 Walkthrough

Walkthrough

The form information disclosure group now shrinks within its grid container. A Playwright regression test checks disclosure-row containment at 320, 390, and 639 pixel viewport widths.

Changes

Form viewport containment

Layer / File(s)	Summary
Disclosure group viewport fix src/components/forms/form-detail-page.tsx, tests/ui-forms-section-nav.spec.ts	The disclosure group now applies min-w-0. The regression test verifies that disclosure rows remain visible, have positive width, and stay within the viewport at three mobile widths.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 8d40e

The change constrains disclosure content to remain within mobile viewports without altering desktop or print behavior, and the focused regression test passed. No actionable merge-blocking risk remains.

Possibly related PRs

• BigSimmo/Database#1735: Directly relates to the form-detail-page.tsx disclosure group change.
• BigSimmo/Database#1869: Overlaps in the form detail page and section navigation regression coverage.
• BigSimmo/Database#476: Addresses responsive forms-page layout and horizontal overflow containment.

Suggested reviewers: claude

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: fixing mobile overflow on the Forms information page.
Description check	✅ Passed	The description explains the motivation, implementation, focused regression test, and verification results; the omitted template checkboxes are non-critical.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/fix-form-info-page-layout-on-mobile

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

_{Comment @coderabbitai help to get the list of available commands.}

[BigSimmo]

Codex review-and-fix summary

• Final state: merged externally by the PR's pre-existing auto-merge workflow.
• Final reviewed head: 8d40eae3a052083332e4c24f1200c50a55407c7e
• Base at merge: 2e3ac494b8b75a5e8f9e9ca53e0b623980602b61
• Merge commit: 4c4cf42448350b954f015a617a233df254b06d2c
• Branch update / merge tree: latest main was merged into the PR branch; the final head is current with the base and its merge tree is clean and byte-identical to the head tree.
• Review outcome: no PR-introduced P0/P1/P2 defect was found. The min-w-0 addition is applied through DisclosureGroup.className at the correct grid-item boundary and does not alter print or desktop behavior. The regression test checks all disclosure-row bounds at 320, 390, and 639px.
• Adversarial review: CodeRabbit was rate-limited and did not provide an independent result; a distinct manual adversarial pass covered shrink-boundary placement, disclosure internals, viewport iteration, geometry assertions, accessibility targeting, print behavior, and the final merged diff.
• Threads: no review threads were present.
• Decisive offline checks: targeted /forms/[slug] DOM contracts 2/2; source typecheck; changed-file ESLint; Prettier; git diff --check; branch-review-ledger and outstanding-issues guards. The full shared DOM file reached 33/38 but five unrelated tests failed because the shared local dependency link did not register jest-dom matchers; the two affected forms cases passed.
• Exact-head required CI: CI passed, including Build, Static PR checks, Unit coverage, Safety/config, Lighthouse budget, Production UI critical, Production UI 1/2/3, and aggregate PR required.
• Exact-head advisory CI: SAST and Secret Scan passed. Migration replay, Advisory UI, Ingestion SAST, container images, visual baselines, and release-browser-matrix were skipped by CI scope.
• Ledger: no record was pushed because GitHub had already published the required base merge and a later record-only commit would have violated the repository's no-ledger-only-tip rule.
• Blockers: none.
• Residual risk: no local production browser test was run under the authorization limits; the exact-head hosted browser suites and Lighthouse budget are green.

Codex did not merge or modify auto-merge. The existing merge workflow completed the PR.