feat: CSS Container Query Driven Responsive Layout System (#66)#74
Merged
elizabetheonoja-art merged 5 commits intoJun 24, 2026
Conversation
…tility-Protocol#66) - Create src/styles/containers.css with @container queries for sidebar, map-panel, data-grid, and charts-area - Create src/styles/breakpoints.css with CSS custom property thresholds consumed by useContainerSize hook - Implement useContainerSize hook with ResizeObserver and CSS custom property reading - Build Sidebar component with pure CSS container-query-driven width and label visibility - Build MapPanel component with CSS container-query-driven control button layout - Build DataGrid component with CSS-driven column visibility and row density - Build ChartsArea component with CSS-driven grid/stacked layout and imperative chart resize - Add container-fluid-text and container-fluid-heading typography utilities - Add @supports fallback for browsers without container-type support - Write unit tests for useContainerSize hook - Write Playwright integration test for container query CSS delivery - Import container CSS files in globals.css
Contributor
|
ci failed |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements Issue #66: CSS Container Query Driven Responsive Layout System for Multi-Form-Factor Operational Dashboards.
Changes
CSS System:
src/styles/containers.css— @container queries defining containment contexts for sidebar, map-panel, data-grid, and charts-area. Each region responds independently to its container's inline size with compact/medium/expanded breakpoints.src/styles/breakpoints.css— CSS custom properties for breakpoint thresholds, consumed by the useContainerSize hookComponents (pure CSS container query driven):
Sidebar.tsx— 64px icon-only at <400px, 220px medium at 400-800px, 320px expanded at >=800px. Icon sizes use container query units (5cqw).MapPanel.tsx— Controls toolbar switches between vertical (compact) and horizontal (expanded) via container queriesDataGrid.tsx— Secondary columns hidden via CSS in compact mode (<600px). Row density and font size scale with container width.ChartsArea.tsx— Grid layout (expanded >=500px) vs stacked (compact <500px). Aspect ratio switches between 16:9 and 4:3.Hook:
useContainerSize.ts— ResizeObserver hook for imperative use (chart resize callbacks). Reads breakpoints from CSS custom properties on :root.Utilities:
container-fluid-text/container-fluid-headingclasses for intrinsic typography scalinggrid-container-autohelper using minmax with cqw units@supports not (container-type: inline-size)fallback with media query approximationsTests:
Closes #66