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
This commit is contained in:
juanatsap
2025-11-25 05:09:05 +00:00
parent 2a5a11e78d
commit 639a99b8ea
6 changed files with 700 additions and 26 deletions
+4 -1
View File
@@ -25,13 +25,16 @@ body {
background-image: var(--page-bg-pattern);
background-size: 40px 40px; /* For dark theme diagonal grid */
background-attachment: fixed;
overflow-x: auto;
max-width: 100vw; /* Prevent horizontal overflow */
overflow-x: hidden; /* NO horizontal scroll on mobile */
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
scroll-padding-top: 70px; /* Account for fixed header */
max-width: 100vw; /* Prevent horizontal overflow */
overflow-x: hidden; /* NO horizontal scroll */
}
/* Ensure Iconify icons display properly */