PROBLEM:
- Previous grid approach (50% 30%) didn't work correctly
- Language selector is INSIDE .site-title div, not a separate grid column
- Grid structure: .site-title | .view-controls-center | .action-buttons-right
SOLUTION @ 540px:
Grid Structure:
- Changed .action-bar-content to single column (1fr)
- Hide .view-controls-center and .action-buttons-right
- .site-title becomes the only visible element
Flexbox Inside .site-title:
- .site-title: display: flex, justify-content: space-between
- .site-title-left: flex: 1 1 55% (hamburger + title area)
* Contains hamburger button and CV JAMR title
* flex-grow allows expansion, flex-shrink allows contraction
- .language-selector: flex: 0 0 35% (language buttons)
* Fixed at ~35% width, doesn't grow or shrink
* justify-content: flex-end (align buttons to right)
Text Overflow Protection:
- .site-title-link: overflow: hidden
- .site-title-text: white-space: nowrap, text-overflow: ellipsis
- Prevents title from breaking layout
RESULT:
Mobile distribution:
✓ Hamburger + Title area: ~55% (flexible)
✓ Language selector (EN/ES): ~35% (fixed)
✓ Remaining ~10%: gaps and padding
✓ Visual result: approximately 50% / 30% with breathing room
BENEFITS:
- Proper space distribution matching internal HTML structure
- Language buttons have adequate touch targets
- Title can truncate gracefully if needed
- All controls still accessible via hamburger menu
juanatsap
dffad20e2f