From 1a3a8ba20e6ad0242934c8d895326fe41fb4a93f Mon Sep 17 00:00:00 2001 From: Marco Date: Fri, 31 Jul 2026 21:08:11 +0000 Subject: [PATCH] Show search/wishlist icons on all screen widths, not just sm+ MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/components/Navbar.tsx | 49 +++++++++++++++++++------------- app/components/SearchOverlay.tsx | 6 +--- 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 1f22298..0833d60 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -113,7 +113,7 @@ function AccountLink() { {/* -translate-y-0.5 — the glyph's own bounding box centers fine mathematically, but the round head (light, isolated) versus the @@ -134,13 +134,11 @@ function AccountLink() { } // Wishlist icon + count badge — only rendered by the caller when -// `wishlistEnabled` (CompanySettings), and even then hidden below `sm:`. -// Account+Cart are the only always-visible icons on true mobile (see the -// trailing-controls group's own comment: gap-2 there was already tuned -// specifically for exactly 2 icons) — a 3rd icon squeezed in at the -// smallest phone widths risks the exact nav-overflow class of bug -// documented in the figma-to-nextjs skill (computed hamburger/icon-row -// thresholds, not assumed ones). sm+ has real room to spare. +// `wishlistEnabled` (CompanySettings). Visible at every width, alongside +// Search/Account/Cart — confirmed by an actual 320px-viewport check (see +// this file's git history) that all 4 icons fit without wrapping/overflow +// once sized down slightly on the smallest screens (see the h-11/w-11 → +// h-10/w-10 max-[375px] override below and on the sibling icon buttons). function WishlistLink() { const { count } = useWishlist(); @@ -148,7 +146,7 @@ function WishlistLink() { 0 ? `Merkliste, ${count} Artikel` : "Merkliste"} - className="relative hidden sm:flex h-11 w-11 items-center justify-center shrink-0 active:scale-[0.9] transition-transform" + className="relative 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" >
+
{/* Logo — real navigation to "/" from anywhere else; only when @@ -455,7 +453,7 @@ export function Navbar({ while leaving that page's content on screen. */} { @@ -467,11 +465,19 @@ export function Navbar({ : closeMobile } > + {/* Fixed width/height are the real file dimensions (Next Image + needs them for optimization/layout); the wrapping Link's own + w-[130px] sm:w-[181px] + h-auto here is what actually shrinks + the rendered logo below 640px — there wasn't enough header + width for 4 icons + hamburger otherwise (confirmed via an + actual Playwright viewport sweep down to 320px, not + assumed). */} einfach produktiv @@ -544,14 +550,17 @@ export function Navbar({ (below lg). Grouped so spacing stays consistent as individual children hide/show across the three breakpoint tiers. */}
- {/* No gap between these two — each is already a 44px touch + {/* No gap between these — each is already a 44px (40px below + 375px, see max-[375px]:h-10/w-10 on each icon button) touch target with the icon centered inside, so even gap-0 here - still leaves ~20px of visual space between the actual - glyphs. The outer gap-2 is what separates this pair from - the CTA-buttons/hamburger group that follows, and stays - untouched. Fixed 2026-07-24: gap-2 here on top of that - built-in padding read as too much space on mobile, where - these two icons are the only always-visible controls. */} + still leaves visual space between the actual glyphs. All 4 + icons (Search/Account/Wishlist/Cart) are visible at every + width, including true mobile — the 375px-and-below size + step exists specifically so all 4 plus the hamburger fit + without wrapping/overflow on the narrowest real phone + viewports (checked at 320px). The outer gap-2 is what + separates this group from the CTA-buttons/hamburger group + that follows. */}
{searchEnabled && } @@ -595,7 +604,7 @@ export function Navbar({ e.stopPropagation(); setMobileOpen((v) => !v); }} - className="lg:hidden flex h-11 w-11 items-center justify-center shrink-0" + className="lg:hidden flex h-11 w-11 max-[375px]:h-10 max-[375px]:w-10 items-center justify-center shrink-0" > - {/* 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. */}