# Pathrule Pattern: Responsive CSS Layouts (1.0.0)
# ::pathrule:package:responsive-css-layouts

### [RULE] Fix intrinsic sizing before adding a breakpoint  (path: /src/styles)
<!-- scope: folder | priority: high | strict -->

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.

- 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.
- Give long identifiers, URLs, and user-generated text an explicit wrapping or truncation policy with an accessible way to reveal the full value.
- 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.
- Prefer logical properties and content-driven block size so localization, writing direction, and text scaling do not collide with fixed pixel assumptions.

See /src/components for the adjacent decision or procedure that completes this constraint.

---

### [RULE] Make the component respond to its container  (path: /src/components)
<!-- scope: folder | priority: medium | strict -->

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.

- Establish a named or local query container at the component boundary whose available inline size determines the layout.
- Switch internal arrangement at the smallest content-driven threshold that preserves readability and controls, not at a device category copied from another page.
- Use viewport media queries for global shell changes such as primary navigation or page columns, and container queries for the internals of reusable modules.
- 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.

See /src/styles for the adjacent decision or procedure that completes this constraint.

---

### [MEMORY] Responsive states follow content pressure, not named devices  (path: /src/styles)

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.

- Start with the narrowest complete layout and add space-enhanced arrangements only when the content itself demonstrates room for them.
- Test shortest and longest supported labels, realistic numbers, validation messages, and missing optional content before selecting a threshold.
- Allow controls to wrap, stack, or move into an intentional overflow menu instead of reducing hit targets or font size to preserve one row.
- 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.

See /src/components for the rule or workflow that puts this decision into practice.

---

### [SKILL] stress-test-responsive-layout  (path: /)

---
name: stress-test-responsive-layout
description: Stress-test a responsive component before publishing it to a shared interface or design system.
---

# Stress Test Responsive Layout

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.

- [ ] Render the component in progressively narrower containers independent of viewport size and record the first content collision, overflow, or unreachable action.
- [ ] Replace labels, numbers, names, URLs, and error messages with realistic longest-case content and repeat with missing and empty states.
- [ ] Test browser zoom and increased text size without shrinking the viewport manually; confirm content reflows and focus remains visible.
- [ ] Switch writing direction and exercise keyboard, touch, and pointer interactions across every responsive state and overflow mechanism.
- [ ] Open menus, dialogs, tooltips, validation, loading, and selected states near container edges; verify overlays are not clipped by a layout fix.

## Exit criteria

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.