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

fix(i18n): desktop language selector showing both icons and dropdown

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

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

@ -8,7 +8,7 @@
{ code: 'en', name: 'English', flag: '🇬🇧' },
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
{ code: 'fr', name: 'Français', flag: '🇫🇷' },
{ code: 'mi', name: 'Te Reo Māori', flag: '🇳🇿', disabled: true, tooltip: 'Coming when system is complete' }
{ code: 'mi', name: 'Te Reo Māori', flag: '🇳🇿', disabled: true, tooltip: 'Planned' }
];
function createLanguageSelector() {
@ -20,7 +20,7 @@
const selectorHTML = `
<div class="language-selector">
<!-- Desktop: Dropdown with text (md and up) -->
<div class="hidden md:block relative">
<div class="hidden md:block md:relative">
<label for="language-selector-desktop" class="sr-only">Select Language</label>
<select
id="language-selector-desktop"
@ -33,7 +33,7 @@
${lang.code === currentLang ? 'selected' : ''}
${lang.disabled ? 'disabled' : ''}
>
${lang.flag} ${lang.name}${lang.disabled ? ' (Coming Soon)' : ''}
${lang.flag} ${lang.name}${lang.disabled ? ' (Planned)' : ''}
</option>
`).join('')}
</select>
@ -45,21 +45,23 @@
</div>
<!-- Mobile: Icon buttons (below md) -->
<div class="flex md:hidden 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 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>
</div>
`;