Idea
A utility (class and/or small dev-mode script) that visually flags whichever element is causing horizontal page overflow/scroll — a common, hard-to-diagnose layout bug in page-builder-driven sites.
Why
Confirmed via full read-through of core/*.css and optional/*.css: nothing like this exists anywhere in the framework today (no matches for overflow-debug-style selectors or tooling).
Scope
- Simplest version: a single opt-in class (e.g.
.sf-debug-overflow applied to body or a container) that outlines any descendant wider than its parent, using a * selector scoped under the debug class to avoid touching global specificity.
- Consider whether this belongs in
core/ (an always-available diagnostic) or as a separate dev-only doc snippet, since it's not a production-facing token/macro like the rest of core/.
- Low risk, small surface — good candidate for a quick, self-contained PR.
Idea
A utility (class and/or small dev-mode script) that visually flags whichever element is causing horizontal page overflow/scroll — a common, hard-to-diagnose layout bug in page-builder-driven sites.
Why
Confirmed via full read-through of
core/*.cssandoptional/*.css: nothing like this exists anywhere in the framework today (no matches for overflow-debug-style selectors or tooling).Scope
.sf-debug-overflowapplied tobodyor a container) that outlines any descendant wider than its parent, using a*selector scoped under the debug class to avoid touching global specificity.core/(an always-available diagnostic) or as a separate dev-only doc snippet, since it's not a production-facing token/macro like the rest ofcore/.