From 60ff98080923e659341c0300f787ae728b48c09c Mon Sep 17 00:00:00 2001
From: John O'Keefe <git@linuxhg.com>
Date: Wed, 16 Sep 2026 16:30:35 -0400
Subject: [PATCH] fix(frontend): header swap breakpoint down to mobile width

- all 16 min-[950px] instances (the only file using the custom
  breakpoint) become standard sm:, so inline search survives the
  whole tablet range and the hamburger appears only once search
  leaves at true mobile width; avatar present throughout either way
- the top-bar search wrapper was also missing its base hidden, which
  rendered search twice below the breakpoint; fixed in the same pass
---
 frontend/src/helperComponents/Header.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/helperComponents/Header.svelte b/frontend/src/helperComponents/Header.svelte
index c1aa211..c1f7956 100644
--- a/frontend/src/helperComponents/Header.svelte
+++ b/frontend/src/helperComponents/Header.svelte
@@ -34,9 +34,9 @@
             >
         </div>
         <div
-            class="flex items-center min-[950px]:order-2 space-x-3 min-[950px]:space-x-0 rtl:space-x-reverse"
+            class="flex items-center sm:order-2 space-x-3 sm:space-x-0 rtl:space-x-reverse"
         >
-            <div class="min-[950px]:block min-[950px]:mr-4">
+            <div class="hidden sm:block sm:mr-4">
                 <Search />
             </div>
             <AvatarMenu />
@@ -47,7 +47,7 @@
                     menu.classList.toggle("hidden");
                 }}
                 type="button"
-                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg min-[950px]:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
+                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg sm:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
                 aria-controls="navbar-user"
                 aria-expanded="false"
             >
@@ -70,11 +70,11 @@
             </button>
         </div>
         <div
-            class="hidden items-center justify-between w-full pb-4 min-[950px]:pb-0 min-[950px]:flex min-[950px]:w-auto min-[950px]:order-1 border border-gray-700 min-[950px]:border-0 bg-gray-800 min-[950px]:bg-transparent rounded-lg"
+            class="hidden items-center justify-between w-full pb-4 sm:pb-0 sm:flex sm:w-auto sm:order-1 border border-gray-700 sm:border-0 bg-gray-800 sm:bg-transparent rounded-lg"
             id="navbar-user"
         >
             <ul
-                class="flex flex-col font-medium pb-6 min-[950px]:p-0 mt-4 min-[950px]:space-x-8 rtl:space-x-reverse min-[950px]:flex-row min-[950px]:mt-0"
+                class="flex flex-col font-medium pb-6 sm:p-0 mt-4 sm:space-x-8 rtl:space-x-reverse sm:flex-row sm:mt-0"
             >
                 <li>
                     {#if !isAniListLoggedIn}
@@ -126,7 +126,7 @@
                     {/if}
                 </li>
             </ul>
-            <div class="flex justify-center min-[950px]:hidden">
+            <div class="flex justify-center sm:hidden">
                 <Search />
             </div>
         </div>