Prompt · Intermediate

Prompt to fix mobile overflow

Diagnose the element and CSS rule causing horizontal overflow, then apply the smallest fix without redesigning the page.

Author: Editorial team
Reviewer: Publication review pending
Review tier: 90-day

Version 1.0.0 · debugging

Variables

[RELEVANT_CODE] · Relevant code: The smallest HTML and CSS reproduction with secrets removed. Required.
[FAILING_WIDTH] · Failing width: A measured CSS viewport where overflow occurs. Required.

Expected output

Reproduction
Culprit
Cause
Patch
Regression Tests

Common failures

Global overflow clipping
Arbitrary breakpoint
Destructive redesign

Compatible modes: Chat, Agent, Ide Assistant

Diagnose horizontal page overflow at [FAILING_WIDTH] using this reduced code:

[RELEVANT_CODE]

Do not redesign the page and do not begin by adding overflow-x: hidden. Identify
the exact overflowing element, the computed width constraint, and the rule or
content causing it. Distinguish ordinary page overflow from intentionally
scrollable code or tabular data.

Return a minimal patch, explain why it fixes the cause, and identify any
behavior it changes. Test at 320px, the reported width, nearby widths, 200%
zoom, long words, enlarged text, and both writing directions when relevant.

If the reproduction is insufficient, list the exact computed-style or layout
measurements needed instead of guessing.

Complete prompt

Diagnose horizontal page overflow at [FAILING_WIDTH] using this reduced code:

[RELEVANT_CODE]

Do not redesign the page and do not begin by adding overflow-x: hidden. Identify
the exact overflowing element, the computed width constraint, and the rule or
content causing it. Distinguish ordinary page overflow from intentionally
scrollable code or tabular data.

Return a minimal patch, explain why it fixes the cause, and identify any
behavior it changes. Test at 320px, the reported width, nearby widths, 200%
zoom, long words, enlarged text, and both writing directions when relevant.

If the reproduction is insufficient, list the exact computed-style or layout
measurements needed instead of guessing.

Common AI mistakes

Reject global clipping, shrinking text, adding an arbitrary breakpoint, or changing every container when one min-width, fixed asset, or grid track is responsible.

Follow-up prompts

Ask for a regression test that fails before the patch and passes after it.