Issue:
- After cache clear, desktop was showing BOTH dropdown AND icon buttons
- Mobile was correctly showing only icon buttons
- Expected: Desktop = dropdown only, Mobile = icons only
Root Cause:
- Tailwind responsive classes were conflicting
- `flex md:hidden gap-1` applied flex at all times, then hid at md+
- `relative` was unconditionally applied to desktop dropdown container
- Separation of concerns was unclear between visibility and layout
Fix Applied:
1. Desktop dropdown container:
- Before: `class="hidden md:block relative"`
- After: `class="hidden md:block md:relative"`
- Now `relative` only applies at md+ breakpoint
2. Mobile icons container:
- Before: `class="flex md:hidden gap-1"` (single div)
- After: `class="md:hidden"` wrapping `class="flex gap-1"` (nested divs)
- Separated visibility control from layout control
- Parent div: controls visibility (hidden at md+)
- Child div: controls layout (flex with gap)
Technical Explanation:
- Tailwind mobile-first: Base styles apply to all, md: applies at ≥768px
- `hidden md:block` = hidden by default, block at md+
- `md:hidden` = visible by default, hidden at md+
- Nesting clarifies intent and prevents class conflicts
Result:
- Desktop (≥768px): Dropdown visible, icons hidden ✓
- Mobile (<768px): Icons visible, dropdown hidden ✓
Deployment:
- language-selector.js deployed to production
- Cache-busting version already in place (?v=0.1.0.1760643941)
- Users should see correct behavior after hard refresh
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mobile UX Improvements:
- Replace dropdown with icon-only buttons on mobile (<768px)
- Show flag icons (🇬🇧🇩🇪🇫🇷) with 44x44px touch targets
- Preserve dropdown with text on desktop (≥768px)
- Add visual feedback for active language selection
- Responsive design using Tailwind md: breakpoint
Pages Updated:
- Add i18n support to researcher.html
- Add i18n support to leader.html
- Add i18n support to implementer.html
- Add i18n support to about.html
- Add i18n support to faq.html
Technical Changes:
- Dual rendering: desktop dropdown + mobile icon buttons
- Event handlers for both desktop select and mobile buttons
- Active state management with visual indicators
- Accessibility: aria-labels and tooltips on icons
- Auto-refresh selector on language change
Mobile Optimization:
- Reduced navbar crowding on small screens
- Better touch targets (min 44x44px)
- Clear visual feedback for language selection
- No text truncation on mobile
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mobile UX Improvements:
- Replace dropdown with icon-only flags on mobile (< 768px)
- Add 44x44px touch targets for better mobile interaction
- Add language selector to mobile menu drawer
- Desktop keeps full dropdown with language names (≥ 768px)
Language Selector Features:
- Mobile navbar: Icon-only buttons (🇬🇧🇩🇪🇫🇷)
- Desktop navbar: Dropdown with full text
- Mobile drawer: Full language list with checkmarks
- Active state: Blue ring around selected language
- Auto-close drawer after language selection
Accessibility:
- ARIA labels on all buttons
- aria-pressed state for current language
- Minimum 44x44px touch targets (WCAG AA)
- Keyboard navigation support maintained
- Screen reader support with role="group"
Technical Changes:
- language-selector.js: Rewritten with responsive versions
- navbar.js: Added mobile-menu-language-selector container
- i18n-simple.js: Added languageChanged event dispatch
UX Benefits:
- Space savings: ~87px saved in mobile navbar
- No crowding between language selector and hamburger menu
- Flag emojis are universally recognizable
- Touch-friendly buttons meet iOS/Android standards
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
