Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Navbar.tsx
+29 -20
View File
@@ -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