CSS Container Query Driven Responsive Layout System for Multi-Form-Factor Operational Dashboards

[elizabetheonoja-art]

Problem Statement / Feature Objective

The operational dashboard must render fluidly on devices ranging from 10-inch field tablets (1200x800) to 32-inch control room monitors (3840x2160), with intermediate breakpoints for laptops and vehicle-mounted displays. Current media query-based layouts produce jarring reflows when operators rotate tablets or resize windows. A CSS Container Query-driven responsive layout system must define named containment contexts (sidebar, map panel, data grid, charts area) that independently respond to their container's inline size rather than the viewport. Each component defines its own breakpoints using container query units (cqw, cqh) and container query length units for intrinsic typography scaling.

Technical Invariants & Bounds

• Containment contexts: sidebar (default 320px, collapsible to 64px), map-panel (flex grow), data-grid (min 600px, max 1200px), charts-area (min 400px).
• Breakpoints per context: compact (< 400px), medium (400-800px), expanded (> 800px). These are defined as custom properties: --container-compact, --container-medium, --container-expanded.
• Typography scaling: base font size = 16px at medium, scaled via clamp(14px, 1cqw, 20px) for body text in each container.
• Grid layout: each container uses CSS Grid with auto-fill and minmax for intrinsic column count. Data grid container: grid-template-columns: repeat(auto-fill, minmax(max(200px, 30cqw), 1fr)).
• Fallback: @supports (container-type: inline-size) gates the container query styles. Browsers without support fall back to a simpler viewport-media-query-based layout.
• Animation: container-driven layout transitions use CSS view transitions API (cross-document) or FLIP animations for smooth container resize transitions.

Codebase Navigation Guide

• src/styles/containers.css - Global container query definitions: container-type, container-name for each layout region.
• src/styles/breakpoints.css - Custom property definitions for compact/medium/expanded breakpoints per container.
• src/components/layout/Sidebar.tsx - Sidebar component with container-type: inline-size; defines sidebar-specific styles.
• src/components/layout/MapPanel.tsx - Map container with container-type: inline-size; adjusts control button sizes.
• src/components/layout/DataGrid.tsx - Data table container; column count and cell density respond to container width.
• src/components/layout/ChartsArea.tsx - Chart grid container; chart aspect ratio and legend placement shift between compact/expanded.
• src/hooks/useContainerSize.ts - Hook using ResizeObserver to expose container dimensions for imperative layout logic (e.g., chart re-render triggers).

Implementation Blueprint

1. In src/styles/containers.css, define each layout region with container-type: inline-size and a unique container-name (e.g., sidebar, map-panel, data-grid, charts-area). Apply via className on the wrapper divs.
2. Define breakpoints as custom properties in src/styles/breakpoints.css: --sidebar-compact: 400px; etc. Use @container (inline-size < 400px) { :root { --container-state: compact; } } pattern. Alternatively, use inline @container queries directly in component styles.
3. Refactor Sidebar.tsx: wrap content in a div with container-type: inline-size. Use @container (inline-size < 400px) to collapse labels to icons only, reduce padding from 24px to 8px. Use container query units (5cqw) for icon sizes.
4. Refactor DataGrid.tsx: container query adjusts the number of visible columns: @container (inline-size < 600px) hides less critical columns. Row height uses clamp(32px, 4cqw, 48px).
5. ChartsArea.tsx: container query switches from row layout (expanded) to stacked layout (compact). Chart aspect ratio changes from 16/9 to 4/3.
6. implement useContainerSize hook using ResizeObserver: returns { width, height, containerState }. Used by imperative chart libraries (Chart.js, Recharts) that need to call chart.resize().
7. Add a smooth transition: on container resize, apply transition: grid-template-columns 0.3s ease, padding 0.3s ease on the container elements. For browsers supporting View Transitions API, wrap the state change in document.startViewTransition().
8. Write a Playwright test that resizes the viewport to tablet dimensions, verifies the sidebar is in compact state (icon-only), then resizes to desktop and verifies expanded state with labels visible.

[Kami-no-san]

hi, i would like to work on this

[grantfox-oss]

🦊 GrantFox — @Kami-no-san has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #66)
2. Your PR will be reviewed by the Utility-Protocol maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Kami-no-san's PR #74 was approved and merged by @elizabetheonoja-art.

🏆 @Kami-no-san: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (188 total points). Track your full progress on GrantFox.

👏 Great work, @Kami-no-san! Keep contributing to Utility-Protocol.