consistent-card-widths

What problem does it solve?

Inconsistent card widths, misplaced headers, and mixed page wrappers cause visual fragmentation and unpredictable responsive behavior across the HBG Portal. These rules standardize when to use full-width versus constrained containers, how many columns to default to, and where to place the PageHeader so pages remain coherent and accessible.

Core Features & Use Cases

• Standardizes multi-column defaults (2–3 columns) and single-column exceptions for narrow workflows to improve readibility and information grouping.
• Defines four width categories (dashboard/full-width, form max-w-4xl, multi-column settings max-w-7xl, admin tab full-width) so pages share predictable breakpoints and line lengths.
• Provides a responsive admin list/card grid pattern and explicit key rules for PageHeader placement and parent-controlled width constraints, useful when building dashboards, settings pages, property edit forms, and admin lists.

Quick Start

Create a new settings page using a max-w-7xl wrapper, place PageHeader as the first child inside that wrapper, and lay out related cards in a responsive three-column grid that collapses to one column on mobile.