Find responsive layout failures

better-layout sets interface grouping, alignment, spacing and responsive structure, then stress-tests the result through resizing, translation and RTL mirroring. Fixes use the project's styling system and existing spacing or density tokens. Its suggested measurements are starting points when a project lacks those systems. A finding needs a demonstrable failure, such as clipping, overlap, a broken mirror or a misleading group, rather than a value that merely differs from a recipe.

Grouping starts with space, then background shapes, with separator lines reserved for cases where space cannot communicate structure. The guidance gives groups more separation than their internal items and aligns content to a small set of shared edges. Controls need a recognizable shape, border, underline or consistent placement zone so they do not read as static content. Direction-dependent layouts use logical properties, while physical geometry such as safe-area insets keeps physical directions.

Content order follows importance, with identifying information leading and metadata or actions trailing. Visual order should match DOM order. Each view has a primary action; excess secondary actions move into a menu. Short views can link to deeper content. Off-screen and collapsed content require a visible cue, and necessary truncated values need a reachable route to the complete text.

The spacing guidance distinguishes bordered controls from borderless glyphs while preserving compact layouts whose hit areas remain distinct. Full-width buttons normally stay within mobile content margins. Backgrounds and media may bleed to viewport edges, while text and controls respect margins and safe areas. Sticky chrome needs scroll padding so anchors and focused elements are not covered.

Responsive behavior follows content fit rather than device presets. Component-level adaptation favors container queries, and testing starts with the smallest and largest supported sizes. Text containers allow growth and wrapping rather than fixed dimensions. Pseudo-localization and a long-string language such as German expose translation problems, especially in short labels. Critical actions stay in normal flow or stable chrome so resizing, zoom and scrolling cannot hide them.

The final inspection covers overflowing grid tracks and flex children, scrollbar-induced width overflow, mobile viewport height, fixed text-box heights and container containment that can collapse a shrink-to-fit box. It also checks safe-area activation, physical inset mapping, mirrored floats and transforms, and sticky-header scroll offsets.

Use it for an authorized layout review or requested layout fixes. Reviews remain read-only unless implementation is requested. It preserves unrelated work and does not treat its default spacing values as universal correctness rules. Browser-dependent coverage stays unverified when the required tools are unavailable.

Inputs are interface code and the supported layout scope. Source inspection checks logical properties, media and container queries, supported viewport assumptions, and DOM order against visual order. Browser checks cover supported widths, 320px, 200% zoom and the RTL mirror.

The output groups findings by violated principle, ordered by severity. Each root-cause row lists affected file-and-line locations, before, after and user impact. HIGH includes blocked content or actions, clipping at narrow width or zoom, inaccessible full values and hidden content without cues. MEDIUM covers hierarchy, reading order or adaptability; LOW covers isolated spacing or alignment polish. Remaining HIGH findings produce Block; otherwise the result is Approve with explicit coverage.

better-accessibility owns hit areas and focus behavior. The better-ui skill owns radius, shadows and animation; better-typography owns line length, text spacing and truncation mechanics. The better-writing skill owns the words, and better-colors owns color emphasis for primary actions.