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

fix(i18n): use block/hidden pattern to prevent both selectors showing on desktop

Browse source 
Issue Confirmed by User:
- After F12 cache clear, initial load works
- BUT on desktop, both dropdown AND icons are rendering together
- Expected: Desktop shows ONLY dropdown, Mobile shows ONLY icons

Previous Attempt Failed:
- Desktop: `hidden md:flex md:relative`
- Mobile: `flex gap-1 md:hidden`
- Problem: `flex` as base class on mobile container created specificity conflict
- Both containers showed on desktop despite `md:hidden`

Root Cause:
- Mixing layout classes (flex) with visibility classes (hidden) on same element
- Tailwind applies base styles first, then responsive modifiers
- `flex` set display:flex, then `md:hidden` tried to override
- CSS specificity and cascade caused unpredictable behavior

Solution - Separate Display Control from Layout:

Desktop Container:
```html
<div class="hidden md:block">        <!-- Display control -->
  <div class="relative">             <!-- Layout/positioning -->
    <select>...</select>
  </div>
</div>
```

Mobile Container:
```html
<div class="block md:hidden">        <!-- Display control -->
  <div class="flex gap-1">           <!-- Layout -->
    ...buttons...
  </div>
</div>
```

Why This Works:
1. Parent divs ONLY control visibility (hidden/block/md:hidden/md:block)
2. Child divs ONLY control layout (relative/flex/gap)
3. No conflicting display properties on same element
4. Clean separation of concerns
5. Predictable Tailwind cascade behavior

Behavior:
- Mobile (<768px):
  - Desktop container: `hidden` (not visible) ✓
  - Mobile container: `block` (visible) ✓

- Desktop (≥768px):
  - Desktop container: `md:block` (visible) ✓
  - Mobile container: `md:hidden` (not visible) ✓

Technical Notes:
- `hidden` = display: none !important (base)
- `md:block` = display: block at ≥768px
- `md:hidden` = display: none !important at ≥768px
- No flex/relative on visibility-controlling elements
- Nested structure ensures proper cascade

🤖 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 09:00:32 +13:00
parent d3dadc1b91
commit 457deedb91
1 changed files with 42 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,47 +18,51 @@
const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
const selectorHTML = `
<!-- 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>
<!-- Desktop: Dropdown only (visible md and up) -->
<div class="hidden md:block">
<div class="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>
</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('')}
<!-- Mobile: Icon buttons only (visible below md) -->
<div class="block 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>
`;