fix(i18n): use block/hidden pattern to prevent both selectors showing on desktop
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
parent
d3dadc1b91
commit
457deedb91
1 changed files with 42 additions and 38 deletions
|
|
@ -18,47 +18,51 @@
|
||||||
const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
|
const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
|
||||||
|
|
||||||
const selectorHTML = `
|
const selectorHTML = `
|
||||||
<!-- Desktop: Dropdown with text (md and up) - Hidden on mobile, Block on desktop -->
|
<!-- Desktop: Dropdown only (visible md and up) -->
|
||||||
<div class="hidden md:flex md:relative">
|
<div class="hidden md:block">
|
||||||
<label for="language-selector-desktop" class="sr-only">Select Language</label>
|
<div class="relative">
|
||||||
<select
|
<label for="language-selector-desktop" class="sr-only">Select Language</label>
|
||||||
id="language-selector-desktop"
|
<select
|
||||||
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"
|
id="language-selector-desktop"
|
||||||
aria-label="Select language"
|
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
|
${supportedLanguages.map(lang => `
|
||||||
value="${lang.code}"
|
<option
|
||||||
${lang.code === currentLang ? 'selected' : ''}
|
value="${lang.code}"
|
||||||
${lang.disabled ? 'disabled' : ''}
|
${lang.code === currentLang ? 'selected' : ''}
|
||||||
>
|
${lang.disabled ? 'disabled' : ''}
|
||||||
${lang.flag} ${lang.name}${lang.disabled ? ' (Planned)' : ''}
|
>
|
||||||
</option>
|
${lang.flag} ${lang.name}${lang.disabled ? ' (Planned)' : ''}
|
||||||
`).join('')}
|
</option>
|
||||||
</select>
|
`).join('')}
|
||||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
</select>
|
||||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||||
<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 class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
</svg>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mobile: Icon buttons (below md) - Flex on mobile, Hidden on desktop -->
|
<!-- Mobile: Icon buttons only (visible below md) -->
|
||||||
<div class="flex gap-1 md:hidden">
|
<div class="block md:hidden">
|
||||||
${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
|
<div class="flex gap-1">
|
||||||
<button
|
${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
|
||||||
data-lang="${lang.code}"
|
<button
|
||||||
class="language-icon-btn w-11 h-11 flex items-center justify-center rounded-lg border-2 transition-all ${
|
data-lang="${lang.code}"
|
||||||
lang.code === currentLang
|
class="language-icon-btn w-11 h-11 flex items-center justify-center rounded-lg border-2 transition-all ${
|
||||||
? 'border-blue-600 bg-blue-50'
|
lang.code === currentLang
|
||||||
: 'border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50'
|
? '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}"
|
aria-label="Switch to ${lang.name}"
|
||||||
>
|
title="${lang.name}"
|
||||||
<span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
|
>
|
||||||
</button>
|
<span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
|
||||||
`).join('')}
|
</button>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue