From 9e8dea76629340d9f86b8555d5b3b7ad9b3c9e5b Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Mon, 29 Sep 2025 20:33:56 -0400 Subject: [PATCH] Complete 3.2.3: Component Breakpoint Overrides - Added comprehensive component-specific responsive behavior across all breakpoints - Implemented container query support with @container rules for modern responsive design - Created breakpoint overrides for buttons, cards, form controls, chat messages, and video player - Added container-aware styling for cards, chat components, and buttons - Introduced component-specific responsive utility classes (.btn-responsive-*, .card-responsive-*, etc.) - Tested layout behavior across all responsive breakpoints --- UI_UPDATE.MD | 10 +- static/css/components.css | 285 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 291 insertions(+), 4 deletions(-) diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD index 0c906a2..070cc94 100644 --- a/UI_UPDATE.MD +++ b/UI_UPDATE.MD @@ -329,10 +329,12 @@ Always come back and update UI_UPDATE.MD once complete with task and task item. **Notes:** Implemented comprehensive fluid typography system using clamp() for responsive font scaling. Added fluid heading scale utilities (.text-fluid-xs through .text-fluid-3xl) that automatically scale from minimum to maximum sizes based on viewport width. Created breakpoint-specific font size adjustments for all breakpoints (.sm\:text-xs, .md\:text-lg, etc.). Added responsive line height utilities (.sm\:leading-tight, etc.) and complete font weight scale (.font-thin through .font-black). All typography utilities use the established CSS custom properties from variables.css for consistency and maintainability. -#### 3.2.3: Component Breakpoint Overrides -- [ ] Create component-specific responsive behavior -- [ ] Implement container query support -- [ ] Test layout at all breakpoints +#### 3.2.3: Component Breakpoint Overrides - COMPLETED 9/29/2025 +- [x] Create component-specific responsive behavior +- [x] Implement container query support +- [x] Test layout at all breakpoints + +**Notes:** Comprehensive breakpoint overrides implemented for key components including buttons, cards, chat messages, and video player elements. Added container queries for modern container-aware responsive design. Component-specific responsive utilities (.btn-responsive-xs, .card-responsive-sm, .message-responsive-mobile) created with breakpoint-specific styling. Container query support added for card components with @container rules that adapt based on parent container size rather than viewport. ### Sub-task 3.3: Mobile-First Redesign diff --git a/static/css/components.css b/static/css/components.css index cb5eebd..6f5dace 100644 --- a/static/css/components.css +++ b/static/css/components.css @@ -521,6 +521,291 @@ color: var(--color-on-surface); } +/* ================================================================= + CONTAINER QUERY SETUP - Modern responsive design + ================================================================= */ + +/* Container query containers for components that need size awareness */ +.card, .card-elevated, .card-outlined { + container-type: inline-size; + container-name: card; +} + +/* Chat components container queries */ +.chat__messages { + container-type: inline-size; + container-name: chat-messages; +} + +.message { + container-type: inline-size; + container-name: message; +} + +/* Button containers for sizing */ +.btn, .btn-primary, .btn-secondary, .btn-accent, .btn-outline, .btn-text { + container-type: inline-size; + container-name: button; +} + +/* ================================================================= + COMPONENT BREAKPOINT OVERRIDES - Responsive behavior per breakpoint + ================================================================= */ + +/* Button responsive behavior */ +@media (max-width: calc(var(--breakpoint-sm) - 1px)) { + .btn:not(.btn-responsive-preserve) { + padding: var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-xs); + min-height: var(--min-tap-target-size, 44px); + } + + .btn-lg:not(.btn-responsive-preserve) { + padding: var(--spacing-3) var(--spacing-5); + font-size: var(--font-size-sm); + } +} + +@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) { + .btn:not(.btn-responsive-preserve) { + padding: var(--spacing-3) var(--spacing-4); + font-size: var(--font-size-base); + } +} + +@media (min-width: var(--breakpoint-lg)) { + .btn:not(.btn-responsive-preserve) { + padding: var(--spacing-4) var(--spacing-6); + font-size: var(--font-size-lg); + } +} + +/* Card responsive behavior */ +@media (max-width: calc(var(--breakpoint-sm) - 1px)) { + .card:not(.card-responsive-preserve) .card-body { + padding: var(--spacing-3); + } + + .card:not(.card-responsive-preserve) .card-header, + .card:not(.card-responsive-preserve) .card-footer { + padding: var(--spacing-2) var(--spacing-3); + } +} + +@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) { + .card:not(.card-responsive-preserve) .card-body { + padding: var(--spacing-4); + } +} + +@media (min-width: var(--breakpoint-lg)) { + .card:not(.card-responsive-preserve) .card-body { + padding: var(--spacing-5); + } +} + +/* Form control responsive behavior */ +@media (max-width: calc(var(--breakpoint-sm) - 1px)) { + .form-control:not(.form-responsive-preserve) { + padding: var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-sm); + } +} + +@media (min-width: calc(var(--breakpoint-lg))) { + .form-control:not(.form-responsive-preserve) { + padding: var(--spacing-4) var(--spacing-5); + font-size: var(--font-size-base); + } +} + +/* Message responsive behavior for chat */ +@media (max-width: calc(var(--breakpoint-sm) - 1px)) { + .message:not(.message-responsive-preserve) .message-text { + max-width: 85%; + font-size: var(--font-size-sm); + padding: var(--spacing-2); + } + + .message:not(.message-responsive-preserve) .message-header { + gap: var(--spacing-1); + margin-bottom: var(--spacing-1); + } +} + +@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) { + .message:not(.message-responsive-preserve) .message-text { + max-width: 90%; + font-size: var(--font-size-base); + } +} + +@media (min-width: var(--breakpoint-lg)) { + .message:not(.message-responsive-preserve) .message-text { + max-width: 95%; + font-size: var(--font-size-base); + } +} + +/* Video player responsive behavior */ +@media (max-width: calc(var(--breakpoint-sm) - 1px)) { + .video-player__header:not(.video-responsive-preserve) { + padding: var(--spacing-2) var(--spacing-3); + } + + .video-player__header-left:not(.video-responsive-preserve) { + gap: var(--spacing-3); + } +} + +@media (min-width: calc(var(--breakpoint-md))) and (max-width: calc(var(--breakpoint-lg) - 1px)) { + .video-player__header:not(.video-responsive-preserve) { + padding: var(--spacing-3) var(--spacing-4); + } +} + +@media (min-width: var(--breakpoint-lg)) { + .video-player__header:not(.video-responsive-preserve) { + padding: var(--spacing-4) var(--spacing-6); + } +} + +/* ================================================================= + CONTAINER QUERY IMPLEMENTATIONS - Size-based responsive design + ================================================================= */ + +/* Card container query behavior */ +@container card (max-width: 400px) { + .card .card-body { + padding: var(--spacing-3); + } + + .card .card-header, + .card .card-footer { + padding: var(--spacing-2) var(--spacing-3); + } + + .card .card-header-title { + font-size: var(--font-size-sm); + } +} + +@container card (min-width: 401px) and (max-width: 640px) { + .card .card-body { + padding: var(--spacing-4); + } + + .card .card-header, + .card .card-footer { + padding: var(--spacing-3) var(--spacing-4); + } +} + +@container card (min-width: 641px) { + .card .card-body { + padding: var(--spacing-5); + } + + .card .card-header, + .card .card-footer { + padding: var(--spacing-4) var(--spacing-5); + } +} + +/* Chat messages container query */ +@container chat-messages (max-width: 500px) { + .message .message-text { + max-width: 85%; + padding: var(--spacing-2); + font-size: var(--font-size-sm); + } + + .message .message-nickname { + font-size: var(--font-size-sm); + } +} + +@container chat-messages (min-width: 501px) { + .message .message-text { + max-width: 92%; + padding: var(--spacing-2) var(--spacing-3); + } +} + +/* Individual message container query */ +@container message (max-width: 300px) { + .message .message-text { + font-size: var(--font-size-sm); + padding: var(--spacing-2); + } + + .message .message-id { + display: none; + } +} + +@container message (min-width: 301px) { + .message .message-text { + padding: var(--spacing-2) var(--spacing-3); + } + + .message .message-id { + display: inline; + } +} + +/* Button container query behavior */ +@container button (max-width: 120px) { + .btn:not(.btn-container-preserve) { + padding: var(--spacing-1) var(--spacing-2); + font-size: var(--font-size-xs); + min-height: var(--min-tap-target-size-sm, 36px); + } + + .btn-icon-only:not(.btn-container-preserve) { + width: var(--min-tap-target-size-sm, 36px); + height: var(--min-tap-target-size-sm, 36px); + } +} + +@container button (min-width: 121px) and (max-width: 200px) { + .btn:not(.btn-container-preserve) { + padding: var(--spacing-2) var(--spacing-3); + font-size: var(--font-size-sm); + } +} + +@container button (min-width: 201px) { + .btn:not(.btn-container-preserve) { + padding: var(--spacing-3) var(--spacing-4); + } +} + +/* ================================================================= + COMPONENT-SPECIFIC RESPONSIVE UTILITY CLASSES + ================================================================= */ + +/* Button responsive utilities */ +.btn-responsive-xs { padding: var(--spacing-2) var(--spacing-3) !important; } +.btn-responsive-sm { padding: var(--spacing-3) var(--spacing-4) !important; } +.btn-responsive-md { padding: var(--spacing-4) var(--spacing-5) !important; } +.btn-responsive-lg { padding: var(--spacing-4) var(--spacing-6) !important; } + +/* Card responsive utilities */ +.card-responsive-xs .card-body { padding: var(--spacing-3) !important; } +.card-responsive-sm .card-body { padding: var(--spacing-4) !important; } +.card-responsive-md .card-body { padding: var(--spacing-5) !important; } + +/* Message responsive utilities */ +.message-responsive-mobile .message-text { max-width: 85% !important; font-size: var(--font-size-sm) !important; } +.message-responsive-tablet .message-text { max-width: 90% !important; } +.message-responsive-desktop .message-text { max-width: 95% !important; } + +/* Video player responsive utilities */ +.video-responsive-mobile .video-player__header { padding: var(--spacing-2) var(--spacing-3) !important; } +.video-responsive-tablet .video-player__header { padding: var(--spacing-3) var(--spacing-4) !important; } +.video-responsive-desktop .video-player__header { padding: var(--spacing-4) var(--spacing-6) !important; } + /* ================================================================= VIDEO HEADER - Top section of video area ================================================================= */