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.
This commit is contained in:
Marco
@@ -4,7 +4,7 @@ import { Reveal } from "./Reveal";
|
||||
function Word({ children }: { children: string }) {
|
||||
return (
|
||||
<p
|
||||
className="font-bold leading-normal text-text-primary text-h2 whitespace-nowrap"
|
||||
className="font-bold leading-normal text-text-primary text-[length:var(--divider-word-size)] whitespace-nowrap"
|
||||
style={{ fontFamily: "var(--font-caveat)" }}
|
||||
>
|
||||
{children}
|
||||
@@ -28,25 +28,30 @@ export function Divider() {
|
||||
return (
|
||||
<Reveal
|
||||
delay={0.3}
|
||||
className="flex items-center justify-center flex-wrap gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center"
|
||||
className="flex items-center justify-center flex-wrap gap-x-3 sm:gap-x-8 gap-y-3 pb-5 pt-12 px-[var(--layout-padding-x)] w-full bg-bg-base text-center"
|
||||
>
|
||||
|
||||
{/* 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. */}
|
||||
<div className="flex items-center gap-8 shrink-0">
|
||||
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. */}
|
||||
<div className="flex items-center gap-3 sm:gap-8 shrink-0">
|
||||
<Word>Klarheit</Word>
|
||||
<Arrow />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 shrink-0">
|
||||
<div className="flex items-center gap-3 sm:gap-8 shrink-0">
|
||||
<Word>Fokus</Word>
|
||||
<Arrow />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 shrink-0">
|
||||
<div className="flex items-center gap-3 sm:gap-8 shrink-0">
|
||||
<Word>Entlastung</Word>
|
||||
|
||||
{/* Sparkle icon — sizes now fluid (--divider-sparkle-*) to match
|
||||
|
||||
+12
-2
@@ -55,9 +55,19 @@ export function Hero() {
|
||||
{/* CTA */}
|
||||
<Link
|
||||
href="/challenge"
|
||||
className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
|
||||
className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
|
||||
>
|
||||
<span className="font-semibold leading-[2.375rem] text-text-primary text-h3 whitespace-nowrap not-italic">
|
||||
{/* 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. */}
|
||||
<span className="font-semibold leading-[2.375rem] text-text-primary text-h3 lg:whitespace-nowrap not-italic">
|
||||
Starte mit der 7-Tage-Challenge
|
||||
</span>
|
||||
<div className="relative h-[1.1875rem] w-[1.5625rem] shrink-0">
|
||||
|
||||
@@ -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. */}
|
||||
<div className="flex items-center gap-2">
|
||||
<AccountLink />
|
||||
<CartLink />
|
||||
{/* 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. */}
|
||||
<div className="flex items-center">
|
||||
<AccountLink />
|
||||
<CartLink />
|
||||
</div>
|
||||
|
||||
{/* CTA buttons — inline from md (768px) up, i.e. through both
|
||||
"Collapsed-CTA" and full Desktop tiers */}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user