john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(i18n): completely rewrite language selector structure to fix desktop rendering

Browse source 
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>
This commit is contained in:
TheFlow 2025-10-17 08:56:08 +13:00
parent 52f3ca6025
commit cebcfcab71
1 changed files with 39 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
public/js/components/language-selector.js
View file

@ -18,51 +18,47 @@
const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
const selectorHTML = `
<div class="language-selector">
<!-- Desktop: Dropdown with text (md and up) -->
<div class="hidden md:block md:relative">
<label for="language-selector-desktop" class="sr-only">Select Language</label>
<select
id="language-selector-desktop"
class="px-3 py-2 pr-8 border border-gray-300 rounded-lg bg-white text-gray-700 text-sm focus:border-blue-600 focus:outline-none cursor-pointer appearance-none"
aria-label="Select language"
>
${supportedLanguages.map(lang => `
<option
value="${lang.code}"
${lang.code === currentLang ? 'selected' : ''}
${lang.disabled ? 'disabled' : ''}
>
${lang.flag} ${lang.name}${lang.disabled ? ' (Planned)' : ''}
</option>
`).join('')}
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</div>
<!-- Desktop: Dropdown with text (md and up) - Hidden on mobile, Block on desktop -->
<div class="hidden md:flex md:relative">
<label for="language-selector-desktop" class="sr-only">Select Language</label>
<select
id="language-selector-desktop"
class="px-3 py-2 pr-8 border border-gray-300 rounded-lg bg-white text-gray-700 text-sm focus:border-blue-600 focus:outline-none cursor-pointer appearance-none"
aria-label="Select language"
>
${supportedLanguages.map(lang => `
<option
value="${lang.code}"
${lang.code === currentLang ? 'selected' : ''}
${lang.disabled ? 'disabled' : ''}
>
${lang.flag} ${lang.name}${lang.disabled ? ' (Planned)' : ''}
</option>
`).join('')}
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</div>
</div>
<!-- Mobile: Icon buttons (below md) -->
<div class="md:hidden">
<div class="flex gap-1">
${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
<button
data-lang="${lang.code}"
class="language-icon-btn w-11 h-11 flex items-center justify-center rounded-lg border-2 transition-all ${
lang.code === currentLang
? 'border-blue-600 bg-blue-50'
: 'border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50'
}"
aria-label="Switch to ${lang.name}"
title="${lang.name}"
>
<span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
</button>
`).join('')}
</div>
</div>
<!-- Mobile: Icon buttons (below md) - Flex on mobile, Hidden on desktop -->
<div class="flex gap-1 md:hidden">
${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
<button
data-lang="${lang.code}"
class="language-icon-btn w-11 h-11 flex items-center justify-center rounded-lg border-2 transition-all ${
lang.code === currentLang
? 'border-blue-600 bg-blue-50'
: 'border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50'
}"
aria-label="Switch to ${lang.name}"
title="${lang.name}"
>
<span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
</button>
`).join('')}
</div>
`;