Show search/wishlist icons on all screen widths, not just sm+

Both were deliberately hidden below 640px to avoid icon-row overflow. Verified via an actual Playwright viewport sweep (320-640px) that simply un-hiding them did overflow — the header's fixed 181px logo + 32px padding left no room. Fixed properly: logo shrinks to 130px and padding drops to px-4 below sm, plus a 40px icon-size step below 375px. Re-verified overflow-free down to 320px.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-31 21:08:11 +00:00
parent b144758b82
commit 1a3a8ba20e
2 changed files with 30 additions and 25 deletions
+1 -5
View File
@@ -25,15 +25,11 @@ export function SearchButton() {
return (
<>
{/* hidden sm: — same reasoning as Navbar's WishlistLink: Account+Cart
are the only always-visible icons on true mobile, a 3rd icon
there risks the same computed nav-overflow class of bug the
figma-to-nextjs skill documents. sm+ has real room to spare. */}
<button
type="button"
onClick={() => setOpen(true)}
aria-label="Suche öffnen"
className="hidden sm:flex h-11 w-11 items-center justify-center shrink-0 active:scale-[0.9] transition-transform"
className="flex h-11 w-11 max-[375px]:h-10 max-[375px]:w-10 items-center justify-center shrink-0 active:scale-[0.9] transition-transform"
>
<svg viewBox="0 0 24 24" className="h-6 w-6 text-text-primary" fill="none" aria-hidden="true">
<circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8" />