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
dab21f753d