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
This commit is contained in:
parent
c4e1c55df9
commit
9e8dea7662
2 changed files with 291 additions and 4 deletions
10
UI_UPDATE.MD
10
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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
================================================================= */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue