Responsive CSS Layouts

Pathrule2 Rules • 1 Memory • 1 Skill

Responsive failures increasingly happen inside components rather than at a few viewport breakpoints: grid tracks refuse to shrink, flex children overflow, long translated content expands controls, and browser zoom exposes assumptions hidden at a designer's canvas width. This pattern constrains intrinsic sizing and overflow behavior, records when container queries beat viewport queries, and provides a repeatable layout stress test across content, input, and accessibility conditions. It complements Tailwind by defining the CSS behavior utilities must express, and it differs from accessibility guidance by concentrating on layout mechanics rather than semantic and interaction requirements.

Suggested path map

Pathrule places each piece on the matching path, so your assistant only sees it where it belongs. This is the scoping you get on import; you can adjust it in your workspace.

/ workspace root

stress-test-responsive-layout

src/

styles/

Fix intrinsic sizing before adding a breakpoint

Responsive states follow content pressure, not named devices

components/

Make the component respond to its container

Rules

Fix intrinsic sizing before adding a breakpoint/src/styleshighstrictAllow grid and flex tracks to shrink, wrap content deliberately, and reserve clipping for genuinely decorative overflow.

1	Many responsive bugs come from a minimum content size the layout cannot shrink below. Adding a media query can move the failure without fixing the track, child, or unbreakable content that caused it.
2
3	- Use shrinkable grid tracks such as `minmax(0, 1fr)` where content must not establish the column minimum, and set the relevant flex child minimum to zero.
4	- Give long identifiers, URLs, and user-generated text an explicit wrapping or truncation policy with an accessible way to reveal the full value.
5	- Do not apply `overflow: hidden` to a large ancestor merely to remove a scrollbar; find the specific overflowing child and preserve focus outlines, menus, and sticky behavior.
6	- Prefer logical properties and content-driven block size so localization, writing direction, and text scaling do not collide with fixed pixel assumptions.
7
8	See /src/components for the adjacent decision or procedure that completes this constraint.

Make the component respond to its container/src/componentsmediumstrictUse container queries when a component can appear in panels of different widths, and keep viewport queries for page-level composition.

1	A reusable card can be narrow on a wide monitor because it sits beside a sidebar or inside a split pane. Viewport breakpoints cannot describe that local constraint and cause the same component to render incorrectly in different placements.
2
3	- Establish a named or local query container at the component boundary whose available inline size determines the layout.
4	- Switch internal arrangement at the smallest content-driven threshold that preserves readability and controls, not at a device category copied from another page.
5	- Use viewport media queries for global shell changes such as primary navigation or page columns, and container queries for the internals of reusable modules.
6	- Provide a non-query base layout that remains usable when containment is absent or the component is rendered in email, print, test, or constrained embedded contexts.
7
8	See /src/styles for the adjacent decision or procedure that completes this constraint.

Memories

Responsive states follow content pressure, not named devices/src/stylesChoose thresholds from the point where real content stops fitting, and keep the number of layout states as small as the interaction permits.

1	Labels such as mobile, tablet, and desktop hide the actual condition a layout responds to. A translated toolbar, browser sidebar, split window, or zoomed page can reach the same content pressure at very different viewport widths.
2
3	- Start with the narrowest complete layout and add space-enhanced arrangements only when the content itself demonstrates room for them.
4	- Test shortest and longest supported labels, realistic numbers, validation messages, and missing optional content before selecting a threshold.
5	- Allow controls to wrap, stack, or move into an intentional overflow menu instead of reducing hit targets or font size to preserve one row.
6	- Keep DOM order aligned with reading and focus order across states; CSS visual reordering must not create an interaction sequence that differs from the screen.
7
8	See /src/components for the rule or workflow that puts this decision into practice.

Skills

stress-test-responsive-layout/rootTest a component against narrow containers, long content, zoom, writing direction, input modes, and dynamic UI states.

1	---
2	name: stress-test-responsive-layout
3	description: Stress-test a responsive component before publishing it to a shared interface or design system.
4	---
5
6	# Stress Test Responsive Layout
7
8	Run this procedure when the affected surface changes, before the result is promoted to production. Record evidence for every step instead of accepting a plausible-looking result.
9
10	- [ ] Render the component in progressively narrower containers independent of viewport size and record the first content collision, overflow, or unreachable action.
11	- [ ] Replace labels, numbers, names, URLs, and error messages with realistic longest-case content and repeat with missing and empty states.
12	- [ ] Test browser zoom and increased text size without shrinking the viewport manually; confirm content reflows and focus remains visible.
13	- [ ] Switch writing direction and exercise keyboard, touch, and pointer interactions across every responsive state and overflow mechanism.
14	- [ ] Open menus, dialogs, tooltips, validation, loading, and selected states near container edges; verify overlays are not clipped by a layout fix.
15
16	## Exit criteria
17
18	The change is complete only when the expected behavior, failure behavior, and rollback path have all been exercised with representative data. Preserve the evidence with the change so the next operator can repeat the same checks.

Why this pattern

AI agents often add more breakpoints instead of fixing intrinsic sizing, hide overflow that contains essential content, or size components from the viewport even when their actual container is narrow.

Built for Frontend teams building reusable interfaces across dashboards, marketing pages, embedded panels, and localized products.

Keeps your assistant from:

Grid and flex children forcing horizontal page overflow
Components responding to viewport width instead of available container space
Translated labels escaping fixed-height controls
Zoom and large text collapsing actions or clipping content

View as markdown

License: Apache-2.0
Version: 1.0.0
Updated: 2026-08-25