 juanatsap
|
82f73cf724
|
fix: CRITICAL - Restore sidebar visibility in landscape mode
Fixed critical issue where sidebars were completely collapsed/hidden
in landscape mode, showing only 33px accordion headers instead of full content.
ROOT CAUSE:
- Sidebar accordions (<details> elements) were collapsed by default
- Native <details> browser behavior prevented CSS-only expansion
- Sidebar content was present but hidden behind collapsed accordion
SOLUTION:
1. JavaScript: Added handleLandscapeAccordions() to auto-open sidebar
accordions when in landscape orientation (≤915px width)
- Runs on DOMContentLoaded, orientationchange, and resize events
- Uses matchMedia to detect landscape mode
- Sets 'open' attribute on all .sidebar-accordion elements
2. CSS: Enhanced sidebar container styles in landscape mode
- Set overflow: visible on sidebars (was hidden)
- Set height: auto on sidebars and .actual-content wrappers
- Forced accordion content visibility with !important rules
- Made summary non-clickable in landscape (pointer-events: none)
3. Tests: Updated landscape test to validate sidebar visibility
- Now checks sidebar visible/hidden state
- Validates sidebar height (should be >100px, not 33px)
- Added debug tests for troubleshooting
RESULTS:
- Sidebar height: 1387px (Android) / 1536px (iPhone) ✓
- Accordion state: OPEN ✓
- All sidebar content fully visible ✓
- No horizontal scroll ✓
Test files:
- tests/mjs/54-landscape-mode-test.mjs (updated with sidebar checks)
- tests/mjs/60-sidebar-content-debug.mjs (new debug test)
- tests/mjs/61-sidebar-positioning-debug.mjs (positioning debug)
- tests/mjs/62-sidebar-computed-height-debug.mjs (height debug)
- tests/mjs/63-media-query-match-test.mjs (media query validation)
|
2025-11-25 05:44:40 +00:00 |
|
|
juanatsap
|
639a99b8ea
|
fix: Complete mobile UX overhaul - horizontal scroll, landscape mode, and centering
Fixes three critical mobile issues across Android and iPhone:
1. HORIZONTAL SCROLL ELIMINATION (CRITICAL)
- Added overflow-x: hidden to html and body globally
- Landscape: Aggressive max-width: 100vw on all containers
- Fixed .cv-page, .cv-container overflow issues
- Prevented scale transform from causing overflow
2. LANDSCAPE MODE COMPLETE FIX
- Single column layout enforced (grid-template-columns: 1fr)
- Photo visible and sized appropriately (max-width: 120px)
- Hamburger menu visible and accessible
- Action bar simplified (center controls hidden)
- Language selector compact
- Smaller buttons (40px) with recalculated positions
- Typography reduced for better fit
3. BUTTON CENTERING (VERIFIED WORKING)
- Confirmed perfect centering in portrait mode
- Android: 290px bar centered at viewport center (188px)
- iPhone: Identical centering behavior
- Landscape: 240px bar for 5 buttons (40px each)
Files modified:
- static/css/01-foundation/_reset.css - Global overflow-x fix
- static/css/05-responsive/_breakpoints.css - Comprehensive landscape overhaul
- tests/mjs/54-landscape-mode-test.mjs - Landscape validation (Android + iPhone)
- tests/mjs/55-button-centering-test.mjs - Button centering validation
- tests/mjs/56-landscape-debug-test.mjs - Media query debugging tool
- tests/mjs/57-horizontal-scroll-debug.mjs - Scroll width debugging tool
Test results:
✅ Portrait: Buttons perfectly centered (0px offset)
✅ Landscape: Single column, no horizontal scroll
✅ Hamburger visible and accessible in landscape
✅ Photo visible in all orientations
✅ Android + iPhone parity confirmed
|
2025-11-25 05:09:05 +00:00 |
|