From 457deedb9169beecbbfe075aad85e7eeebe9afc7 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Fri, 17 Oct 2025 09:00:32 +1300
Subject: [PATCH] fix(i18n): use block/hidden pattern to prevent both selectors
 showing on desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 public/js/components/language-selector.js | 80 ++++++++++++-----------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/public/js/components/language-selector.js b/public/js/components/language-selector.js
index c8b7c61a..da18537e 100644
--- a/public/js/components/language-selector.js
+++ b/public/js/components/language-selector.js
@@ -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>
     `;