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>
This commit is contained in:
Dorian
2026-02-12 12:46:58 +00:00
parent 793df81798
commit 8145dc9590

View File

@@ -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="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"> <div class="flex items-center justify-between">
<!-- Logo + Navigation (Left Side) --> <!-- Logo + Navigation (Left Side) -->
<div class="flex items-center gap-10"> <div class="flex items-center gap-4 lg:gap-10">
<router-link to="/"> <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" /> <img src="/assets/images/logo-desktop.svg" alt="IndeeHub" class="h-8 md:h-10 ml-2 md:ml-0" />
</router-link> </router-link>
@@ -14,18 +14,19 @@
<button @click="handleMyListClick" :class="isRoute('/library') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'">My List</button> <button @click="handleMyListClick" :class="isRoute('/library') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'">My List</button>
<!-- Inline Algorithm Buttons (xl+ screens where they fit) --> <!-- Inline Algorithm Buttons (xl+ screens where they fit) -->
<div class="hidden xl:flex items-center gap-3">
<button <button
v-for="algo in algorithms" v-for="algo in algorithms"
:key="'inline-' + algo.id" :key="'inline-' + algo.id"
@click="handleAlgoSelect(algo.id)" @click="handleAlgoSelect(algo.id)"
:class="activeAlgorithm === algo.id ? 'nav-button-active' : 'nav-button'" :class="activeAlgorithm === algo.id ? 'nav-button-active' : 'nav-button'"
class="hidden xl:inline-block"
> >
{{ algo.label }} {{ algo.label }}
</button> </button>
</div>
<!-- Algos Dropdown (mdxl screens where inline buttons would overflow) --> <!-- Algos Dropdown (mdxl screens where inline buttons would overflow) -->
<div class="relative algos-dropdown xl:hidden"> <div class="relative algos-dropdown flex xl:hidden">
<button <button
@click="toggleAlgosMenu" @click="toggleAlgosMenu"
:class="activeAlgorithm ? 'nav-button-active' : 'nav-button'" :class="activeAlgorithm ? 'nav-button-active' : 'nav-button'"