From 52f3ca6025bb22c0ba8a2d82e8e8536ae09f9821 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Fri, 17 Oct 2025 08:50:59 +1300
Subject: [PATCH] fix(i18n): desktop language selector showing both icons and
 dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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