responsive-reveal-auditlisted

# Responsive & scroll-reveal audit The premise: **most "it looks broken on mobile" reports are one or two specific, measurable defects, not a general vibe.** Eyeballing a page — or worse, screenshotting it — finds the ugly parts, not the broken parts. Measuring finds the broken parts, and the numbers are what let you fix the cause instead of padding around the symptom. Work in this order. Each stage feeds the next. ## 1. Measure before you touch anything Open the page in a browser tool, set the viewport to a real phone width, and run `scripts/overflow-probe.js` via whatever JS-evaluation tool the browser integration gives you. It returns every element sticking outside the viewport, with how many pixels each overshoots. Run it at **320, 360, 390, 768 and 1440** at minimum. 320 is the floor that still has real users; 360–414 is where the bulk of phone traffic actually sits; 768 catches tablet/breakpoint seams; 1440 is your regression check that you didn't wreck desktop while fixing mobile. Record the numbers before you edit. You need the "before" to prove the "after", and a surprising share of reported problems turn out to be somewhere else entirely. ### The trap that hides everything `body { overflow-x: hidden }` is on almost every site. It does **not** prevent overflow — it *clips* it and removes the user's ability to scroll to it. A column, a CTA or a whole nav control ends up outside the screen with no scrollbar, no glitch, and no way to reach it. `scrollWidth` is