From 8145dc95907e64ada4712e478266c76a9804f8f4 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 12 Feb 2026 12:46:58 +0000
Subject: [PATCH] Fix algo filters showing both inline and dropdown at once

- Wrap inline algo buttons in a hidden/flex container so the
  parent div controls visibility instead of per-button classes
  (scoped .nav-button display:inline-block was overriding
  Tailwind's hidden class)
- Add flex-shrink-0 to logo link so it never gets squeezed out
  on narrower desktop screens
- Reduce logo-to-nav gap on md screens (gap-4) to prevent
  overflow, widen to gap-10 at lg+

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/AppHeader.vue | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 3c7d996..9e2d2f9 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -3,8 +3,8 @@
     <div class="floating-glass-header mx-auto px-4 md:px-6 py-3.5 rounded-2xl transition-all duration-300" style="max-width: 100%;">
       <div class="flex items-center justify-between">
         <!-- Logo + Navigation (Left Side) -->
-        <div class="flex items-center gap-10">
-          <router-link to="/">
+        <div class="flex items-center gap-4 lg:gap-10">
+          <router-link to="/" class="flex-shrink-0">
             <img src="/assets/images/logo-desktop.svg" alt="IndeeHub" class="h-8 md:h-10 ml-2 md:ml-0" />
           </router-link>
           
@@ -14,18 +14,19 @@
             <button @click="handleMyListClick" :class="isRoute('/library') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'">My List</button>
 
             <!-- Inline Algorithm Buttons (xl+ screens where they fit) -->
-            <button
-              v-for="algo in algorithms"
-              :key="'inline-' + algo.id"
-              @click="handleAlgoSelect(algo.id)"
-              :class="activeAlgorithm === algo.id ? 'nav-button-active' : 'nav-button'"
-              class="hidden xl:inline-block"
-            >
-              {{ algo.label }}
-            </button>
+            <div class="hidden xl:flex items-center gap-3">
+              <button
+                v-for="algo in algorithms"
+                :key="'inline-' + algo.id"
+                @click="handleAlgoSelect(algo.id)"
+                :class="activeAlgorithm === algo.id ? 'nav-button-active' : 'nav-button'"
+              >
+                {{ algo.label }}
+              </button>
+            </div>
 
             <!-- Algos Dropdown (md–xl screens where inline buttons would overflow) -->
-            <div class="relative algos-dropdown xl:hidden">
+            <div class="relative algos-dropdown flex xl:hidden">
               <button
                 @click="toggleAlgosMenu"
                 :class="activeAlgorithm ? 'nav-button-active' : 'nav-button'"