From 55de9b3e29b6eac847b49719be539c81636583cb Mon Sep 17 00:00:00 2001 From: Marco Date: Fri, 24 Jul 2026 18:32:35 +0000 Subject: [PATCH] Fix three mobile layout issues on the homepage - Hero CTA: whitespace-nowrap forced the button as wide as the full 32-char phrase, overflowing the stacked mobile column. Now wraps to two lines below lg:, single line from lg: up where there's room. - Navbar: the account/cart icons are 44px touch targets with the glyph centered inside, so the outer gap-2 read as too much space on top of that padding. Grouped them with no gap between just the two. - Divider: "Klarheit -> Fokus -> Entlastung" plus its connector icons needs ~550px to fit one row even at the site's 768px fluid floor, far more than a phone's ~310px content width. Added a component-scoped --divider-word-size (independent from --text-h2) plus a <640px override that shrinks the words/icons/gaps together. --- app/components/Divider.tsx | 17 +++++++++++------ app/components/Hero.tsx | 14 ++++++++++++-- app/components/Navbar.tsx | 14 ++++++++++++-- app/globals.css | 29 +++++++++++++++++++++++++++++ 4 files changed, 64 insertions(+), 10 deletions(-) diff --git a/app/components/Divider.tsx b/app/components/Divider.tsx index b016f83..5041dec 100644 --- a/app/components/Divider.tsx +++ b/app/components/Divider.tsx @@ -4,7 +4,7 @@ import { Reveal } from "./Reveal"; function Word({ children }: { children: string }) { return (

{children} @@ -28,25 +28,30 @@ export function Divider() { return ( {/* Word + its trailing icon are grouped into one shrink-0 flex unit so flex-wrap only ever breaks BETWEEN pairs, never leaving an arrow stranded alone on its own line — the arrows are always visible now (previously hidden below md: entirely to sidestep - that exact problem), this fixes the root cause instead. */} -

+ that exact problem), this fixes the root cause instead. + gap-3/sm:gap-8 (not a flat gap-8): below 640px the words and + icons already shrink via --divider-word-size/--divider-arrow-* + (see globals.css), tightening the gaps too is what gets the + whole phrase close to fitting on one row instead of each pair + wrapping to its own line. */} +
Klarheit
-
+
Fokus
-
+
Entlastung {/* Sparkle icon — sizes now fluid (--divider-sparkle-*) to match diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index 408a352..23b10a8 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -55,9 +55,19 @@ export function Hero() { {/* CTA */} - + {/* whitespace-nowrap only from lg: up, where the 5-col text + column has room for the full phrase on one line. Below + lg: (stacked, narrower column) nowrap forced this button + wider than the column itself, overflowing on mobile — + fixed 2026-07-24 by letting it wrap to two lines instead + (leading-[2.375rem] was already sized for that). max-w-full + on the Link above is what actually makes the wrap happen — + without it, a flex item with items-start siblings just + grows to fit the unwrapped text instead of respecting the + column width. */} + Starte mit der 7-Tage-Challenge
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index c406635..ab11fe7 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -475,8 +475,18 @@ export function Navbar({ singleActiveProduct }: { singleActiveProduct: boolean } (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 + 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. */} +
+ + +
{/* CTA buttons — inline from md (768px) up, i.e. through both "Collapsed-CTA" and full Desktop tiers */} diff --git a/app/globals.css b/app/globals.css index 748ef40..84255d1 100644 --- a/app/globals.css +++ b/app/globals.css @@ -141,6 +141,35 @@ --divider-sparkle-h: clamp(2.0625rem, 1.5554rem + 1.0565vw, 2.50625rem); --divider-sparkle-inner-w: clamp(1.4375rem, 1.09875rem + 0.706vw, 1.734rem); --divider-sparkle-inner-h: clamp(1.9375rem, 1.4375rem + 1.0417vw, 2.375rem); + /* Own token, mirrors --text-h2's clamp() exactly rather than the Word + component reading var(--text-h2) directly — that's what lets the + mobile override below shrink just this component's words without + touching every other text-h2 heading site-wide. */ + --divider-word-size: clamp(1.625rem, 1.1964rem + 0.8929vw, 2rem); +} + +/* This project's fluid() scale (see fluid.ts) is calibrated for the + 768-1440px Tablet-Desktop range and floors out at the 768px value for + any narrower viewport (clamp()'s MIN bound) — by design, see the other + fluid tokens above. Divider is the one spot that floor doesn't work: + the "Klarheit → Fokus → Entlastung" phrase plus its connector icons + needs ~550px of width to lay out on one row even at the 768px floor + size, far more than a phone's ~310px content width. Below Tailwind's + sm: breakpoint, shrink these tokens further so the phrase gets much + closer to fitting on one row instead of stacking into three separate + centered lines (see Divider.tsx's gap-x-3/gap-3 mobile overrides, + same breakpoint). Scoped to these component-only tokens, not + --text-h2 itself. */ +@media (max-width: 639px) { + :root { + --divider-word-size: 1.125rem; + --divider-arrow-w: 1.125rem; + --divider-arrow-h: 0.3125rem; + --divider-sparkle-w: 0.875rem; + --divider-sparkle-h: 1.15rem; + --divider-sparkle-inner-w: 0.8rem; + --divider-sparkle-inner-h: 1.075rem; + } } html {