john-okeefe/Anitrack
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

fix(frontend): header swap breakpoint down to mobile width

Browse Source 
- 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
This commit is contained in:
John O'Keefe
2026-09-16 16:30:35 -04:00
parent e2c8ba10ce
commit 60ff980809
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/helperComponents/Header.svelte
+6 -6
View File
@@ -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>