Critical Issue:
- Desktop showed NOTHING on initial load after cache clear
- Then both dropdown AND icons appeared together
- Expected: Desktop = dropdown ONLY, Mobile = icons ONLY
Root Cause Analysis:
1. Wrapper div `language-selector` had no display control
2. Nested structure with `hidden md:block` on desktop container
3. Nested structure with `md:hidden` wrapping flex container on mobile
4. Tailwind `hidden` class uses `display: none !important`
5. Complex nesting caused CSS specificity and timing issues
6. Both containers fought for visibility control
Previous Structure (BROKEN):
```html
<div class="language-selector">
<!-- Desktop -->
<div class="hidden md:block md:relative">
<select>...</select>
</div>
<!-- Mobile -->
<div class="md:hidden">
<div class="flex gap-1">
...buttons...
</div>
</div>
</div>
```
New Structure (FIXED):
```html
<!-- Desktop - Direct sibling -->
<div class="hidden md:flex md:relative">
<select>...</select>
</div>
<!-- Mobile - Direct sibling -->
<div class="flex gap-1 md:hidden">
...buttons...
</div>
```
Key Improvements:
1. Removed wrapper div - eliminated ambiguity
2. Made both containers direct siblings in parent
3. Desktop: `hidden md:flex md:relative`
- hidden on mobile (display: none)
- flex on desktop (display: flex at md+)
- relative positioning only on desktop
4. Mobile: `flex gap-1 md:hidden`
- flex with gap on mobile (display: flex)
- hidden on desktop (display: none at md+)
5. Removed extra nested div wrappers
6. Each container explicitly controls own visibility AND layout
Technical Details:
- Tailwind mobile-first: base = mobile, md: = desktop (≥768px)
- `hidden` = display: none !important (all sizes)
- `md:flex` = display: flex at ≥768px
- `md:hidden` = display: none at ≥768px
- Using `flex` instead of `block` for better layout control
- Siblings don't interfere with each other's display logic
Result:
- Desktop (≥768px): Dropdown visible (flex), Icons hidden ✓
- Mobile (<768px): Icons visible (flex), Dropdown hidden ✓
- Clean, predictable behavior with no timing issues
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
cebcfcab71
