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>

app/components/Navbar.tsx

@@ -113,7 +113,7 @@ function AccountLink() {
     <Link
       href={href}
       aria-label={loggedIn ? "Mein Konto (eingeloggt)" : "Anmelden"}
-      className="relative 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"
     >
       {/* -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() {
     <Link
       href="/konto/merkliste"
       aria-label={count > 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"
     >
       <svg viewBox="0 0 20 18" className="h-6 w-6 text-text-primary" fill="none" aria-hidden="true">
         <path
@@ -214,7 +212,7 @@ function CartLink() {
         }
       }}
       aria-label={visibleCount > 0 ? `Warenkorb, ${visibleCount} Artikel` : "Warenkorb"}
-      className="relative 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"
     >
       <svg
         viewBox="0 0 32 30"
@@ -443,7 +441,7 @@ export function Navbar({
           : "bg-bg-base"
       }`}
     >
-      <div className="flex h-[6.25rem] w-full shrink-0 items-center px-8">
+      <div className="flex h-[6.25rem] w-full shrink-0 items-center px-4 sm:px-8">
         <div className="w-full flex items-center justify-between">
 
           {/* Logo — real navigation to "/" from anywhere else; only when
@@ -455,7 +453,7 @@ export function Navbar({
               while leaving that page's content on screen. */}
           <Link
             href="/"
-            className="shrink-0"
+            className="shrink-0 w-[130px] sm:w-[181px]"
             onClick={
               pathname === "/"
                 ? (e) => {
@@ -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). */}
             <Image
               src="/logo.png"
               alt="einfach produktiv"
               width={181}
               height={61}
+              className="w-full h-auto"
               priority
             />
           </Link>
@@ -544,14 +550,17 @@ export function Navbar({
               (below lg). Grouped so spacing stays consistent as individual
               children hide/show across the three breakpoint tiers. */}
           <div className="flex items-center gap-2">
-            {/* 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. */}
             <div className="flex items-center">
               {searchEnabled && <SearchButton />}
               <AccountLink />
@@ -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"
             >
               <span className="relative block h-4 w-6">
                 <span

app/components/SearchOverlay.tsx

@@ -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" />