Changed landscape orientation behavior to display profile photo
at reduced size (50% width, max 80px) instead of hiding it completely.
Changes:
- static/css/05-responsive/_breakpoints.css: Changed from display:none to width:50%
- tests/mjs/48-mobile-landscape-and-blur-test.mjs: Updated test to verify photo visibility
Test Results:
✅ Photo visible in landscape: YES
✅ Photo width: 80px (max: 80px)
✅ Landscape mode optimized with visible photo
Screenshot: tests/screenshots/mobile-landscape-optimized.png
Mobile Portrait Enhancements:
- Added iOS-style blur backdrop behind fixed buttons
- Frosted glass effect with backdrop-filter: blur(20px) saturate(180%)
- Semi-transparent background with border-top separator
- Dark mode variant for theme consistency
- Z-index 98 (below buttons at 99)
- pointer-events: none to maintain button animations and clicks
Landscape Orientation Fixes:
- Hide profile photo to maximize vertical space
- Compact header with reduced font sizes (1.2rem)
- Reduced padding on action bar, sidebar, and sections
- Optimized button sizes (40x40px) and positions
- Fixed hamburger menu positioning in landscape
Files Modified:
- static/css/05-responsive/_breakpoints.css: Added blur backdrop and landscape styles
- templates/index.html: Added fixed-buttons-backdrop element
- tests/mjs/48-mobile-landscape-and-blur-test.mjs: Comprehensive test suite
Test Results:
✅ Blur backdrop exists with correct blur effect
✅ Fixed position at bottom with 90px height
✅ Border separator visible (0.5px)
✅ Photo hidden in landscape mode
✅ Compact sizing applied in landscape
✅ All animations maintained (backdrop separate from buttons)
Screenshots:
- tests/screenshots/mobile-portrait-blur-bar.png
- tests/screenshots/mobile-landscape-optimized.png
juanatsap