From bca29ab7a3ba0b2fb09fac22e4d94888b7c13bf8 Mon Sep 17 00:00:00 2001 From: Marco Date: Fri, 24 Jul 2026 19:01:18 +0000 Subject: [PATCH] Fix more mobile responsive issues: Hero, arrows, cart button, checkmarks, modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Newsletter card icon: fixed an aspect-ratio distortion bug (w-16 maps to this project's fluid --spacing-16, which floors to 40px below 768px, paired with a fixed 55px height — squished the icon on mobile). Same root cause existed in NewsletterModal's envelope icon; that one's now just hidden below md: instead per feedback. - Hero: subtitle sized down and CTA checkmark icon scaled to match below lg:, social proof text always wraps below the avatars there instead of only when it doesn't fit. - Werkzeuge connector arrows (todo-cards/newsletter/challenge HowItWorks): object-contain added — the SVG has preserveAspectRatio="none" and was stretching to fill the square mobile box instead of keeping its thin-arrow shape. - Challenge bottom CTA: icon now stacks above the copy, centered, below lg: to match the Home Newsletter card's pattern. - Homepage Werkzeuge icons: smaller below md: to match the (fluid-floor) text size next to them. - Blog detail "Passend dazu" card: the fixed w-[19rem] title column plus "Entdecken" sharing its row overflowed on mobile; stacked below sm: instead, with a little top margin on "Entdecken". - Todo-Karten checklist checkmarks: recolored brand-orange (icon-check .svg's fill lives in an internal CSS var that can't be overridden from outside an -loaded SVG, so switched to an inline SVG) and top-aligned instead of vertically centered. - AddToCartButton: added whitespace-nowrap to the stacked-label grid (used to reserve button width across all possible label texts) — one of those labels wrapping to two lines on a narrow w-full button was inflating the row height for whichever label is actually showing, leaving a tall empty gap under "Ausverkauft". --- app/blog/[slug]/page.tsx | 23 +++++++++++++------- app/challenge/page.tsx | 12 +++++++--- app/components/AddToCartButton.tsx | 9 +++++++- app/components/Hero.tsx | 23 +++++++++++--------- app/components/Newsletter.tsx | 11 ++++++++-- app/components/NewsletterModal.tsx | 4 ++-- app/components/Tools.tsx | 10 ++++++--- app/newsletter/components/HowItWorks.tsx | 6 ++++- app/todo-cards/components/Focus.tsx | 15 +++++++++++-- app/todo-cards/components/HowItWorks.tsx | 8 ++++++- app/todo-cards/components/TodoKartenHero.tsx | 17 +++++++++++++-- 11 files changed, 103 insertions(+), 35 deletions(-) diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx index b02567f..282397a 100644 --- a/app/blog/[slug]/page.tsx +++ b/app/blog/[slug]/page.tsx @@ -120,27 +120,34 @@ export default async function BlogDetailPage({ {post.relatedProduct?.href && (

Passend dazu:

-
- {/* w-[19rem] (305px) — matches Figma's title-col exactly, - so the description wraps at the same point instead of - stretching out to fill the space before "Entdecken". */} -
+ {/* Stacked below sm: — the fixed w-[19rem] title column plus + "Entdecken" on the same row overflowed a mobile-width + card (fixed 2026-07-24). "Entdecken" wraps to its own + line with a little space above it; back to the + side-by-side row (matching Figma) from sm: up, where + there's room for both. */} +
+ {/* w-[19rem] (305px) only from sm: — matches Figma's + title-col exactly there, so the description wraps at + the same point instead of stretching out to fill the + space before "Entdecken"; full width below sm:. */} +

{post.relatedProduct.name}

{post.relatedProduct.description}

- + Entdecken
) : null, @@ -334,8 +337,11 @@ export default async function ChallengePage() {
- {/* Left: icon + copy */} -
+ {/* Left: icon + copy — icon above text, centered, below lg: + (matches the Home Newsletter card's icon-above-text + pattern), row layout again from lg: up alongside the + outer Reveal's own flex-col -> lg:flex-row switch. */} +
diff --git a/app/components/AddToCartButton.tsx b/app/components/AddToCartButton.tsx index 4722ba9..ced7908 100644 --- a/app/components/AddToCartButton.tsx +++ b/app/components/AddToCartButton.tsx @@ -128,7 +128,14 @@ export function AddToCartButton({ also reserves space for "Ausverkauft"/"Maximale Menge im Warenkorb" — the widest of the four wins regardless of which is showing. */} - + {/* whitespace-nowrap — inherited by every stacked span below. On a + w-full button (e.g. this page's mobile layout), "Maximale Menge + im Warenkorb" is long enough to wrap to two lines without this, + and since every stacked span shares the same grid cell, that + inflated the row height for whichever text is actually showing + too — "Ausverkauft" rendered with a tall empty gap underneath it + (fixed 2026-07-24). */} + diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index 2748ffb..133ac20 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -47,8 +47,10 @@ export function Hero() {

- {/* Subheading */} -

+ {/* Subheading — smaller fixed size below lg:, text-h-emphasis's + own 20px floor read too large next to the now-smaller mobile + CTA text. leading shrinks to match, not just font-size. */} +

Für Menschen mit Familie, Verantwortung und zu wenig Zeit

@@ -67,17 +69,18 @@ export function Hero() { Starte mit der 7-Tage-Challenge -
- + {/* Scaled down to match the smaller mobile CTA text (same + ~0.76 aspect ratio as the lg: size), full size again from + lg: up alongside text-h3. */} +
+
- {/* Social proof — flex-wrap + justify-center rather than a fixed - breakpoint: at narrow widths avatars+text don't fit on one - row, so the text wraps to its own line and both lines end up - centered; from lg: up (real column width) it still fits on - one row exactly as before, so nothing changes there. */} -
+ {/* Social proof — always avatars-then-text on two lines below + lg: (not just when it happens to overflow), single row again + from lg: up where the real column width fits it fine. */} +
{/* Avatars — gap 2px, not overlapping */}
{["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => ( diff --git a/app/components/Newsletter.tsx b/app/components/Newsletter.tsx index 6a7f7b7..810dea0 100644 --- a/app/components/Newsletter.tsx +++ b/app/components/Newsletter.tsx @@ -55,7 +55,14 @@ export function Newsletter({ width leaves real room. */}
- {/* Decorative envelope icon, tilted -4° as per design */} + {/* Decorative envelope icon, tilted -4° as per design. + w-[4rem], not w-16 — this project's --spacing-16 is a + fluid token (floors to 40px below 768px, see globals.css), + so pairing w-16 with the fixed h-[3.438rem] squished the + icon to a 40:55 box on mobile instead of the SVG's native + 64:55.0096 (it has preserveAspectRatio="none", so it + actually stretches to whatever box it's given — fixed + 2026-07-24). */}
diff --git a/app/components/NewsletterModal.tsx b/app/components/NewsletterModal.tsx index 265f38b..e5a23ab 100644 --- a/app/components/NewsletterModal.tsx +++ b/app/components/NewsletterModal.tsx @@ -172,8 +172,8 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: () {/* -scale-y-100 is required, not just -rotate-4 — the SVG itself is authored upside-down (matches how Newsletter.tsx uses this exact same asset); without it the icon renders - flipped. */} -
+ flipped. Hidden below md: — removed on mobile 2026-07-24. */} +
diff --git a/app/components/Tools.tsx b/app/components/Tools.tsx index 7c03a65..a3ee14a 100644 --- a/app/components/Tools.tsx +++ b/app/components/Tools.tsx @@ -38,9 +38,13 @@ export async function Tools() { key={tool.id} className="md:col-span-4 flex gap-8 items-start rounded-md transition-transform duration-300 hover:-translate-y-1" > - {/* Icon — uniform box, pre-flipped/rotated source asset */} -
- + {/* Icon — uniform box, pre-flipped/rotated source asset. + size-14 (56px) is a fixed value at every width (14 isn't + one of this project's fluid spacing-scale steps) — smaller + below md: so it doesn't dwarf the title/description text, + which does shrink toward its own fluid floor there. */} +
+
{/* Card content — self-stretch + h-full + justify-between so diff --git a/app/newsletter/components/HowItWorks.tsx b/app/newsletter/components/HowItWorks.tsx index 095f2ae..03b8ad8 100644 --- a/app/newsletter/components/HowItWorks.tsx +++ b/app/newsletter/components/HowItWorks.tsx @@ -76,12 +76,16 @@ export function HowItWorks() { // technique as Challenge's step connector and todo-cards' // identical HowItWorks, not just the same icon asset.
+ {/* object-contain — see todo-cards/HowItWorks.tsx's own + comment on this same fix: the SVG's preserveAspectRatio + ="none" stretched it to fill the square mobile box + instead of keeping its thin-arrow ratio. */}
)} diff --git a/app/todo-cards/components/Focus.tsx b/app/todo-cards/components/Focus.tsx index 9b56109..d460011 100644 --- a/app/todo-cards/components/Focus.tsx +++ b/app/todo-cards/components/Focus.tsx @@ -9,6 +9,17 @@ const bullets = [ "Inklusive Mini-Anleitung mit Tipps für den Start", ]; +// Inline, brand-orange stroke — same fix/reasoning as TodoKartenHero.tsx's +// own IconCheck (icon-check.svg's fill can't be recolored from outside +// the SVG when loaded via /next/image). +function IconCheck() { + return ( + + + + ); +} + export function Focus() { return (
@@ -33,8 +44,8 @@ export function Focus() {

    {bullets.map((b) => ( -
  • - +
  • + {b}
    • ))} diff --git a/app/todo-cards/components/HowItWorks.tsx b/app/todo-cards/components/HowItWorks.tsx index afe7ece..52e7d35 100644 --- a/app/todo-cards/components/HowItWorks.tsx +++ b/app/todo-cards/components/HowItWorks.tsx @@ -83,12 +83,18 @@ export function HowItWorks() { // — same margin-based centering technique as Challenge's // step connector, not just the same icon asset.
    + {/* object-contain — the SVG has preserveAspectRatio="none" + (viewBox 40x12) and stretches to fill whatever box + it's given; the square w-6 h-6 mobile box squished it + into a blob instead of a thin arrow. contain keeps its + real ratio, letterboxed inside the (still square, so + rotate-90 doesn't shift its footprint) box. */}
    )} diff --git a/app/todo-cards/components/TodoKartenHero.tsx b/app/todo-cards/components/TodoKartenHero.tsx index 4ce199e..2bc5e29 100644 --- a/app/todo-cards/components/TodoKartenHero.tsx +++ b/app/todo-cards/components/TodoKartenHero.tsx @@ -12,6 +12,19 @@ const checklist = [ "Minimalistisch, analog, effektiv", ]; +// Inline, brand-orange stroke — icon-check.svg's fill is hardcoded to +// #222221 via an internal CSS var that only resolves inside the SVG's own +// document, so it can't be recolored from the host page when loaded via +// /next/image. Same simple checkmark path as Challenge's own +// Check() component, for the same orange-checkmark look (fixed 2026-07-24). +function IconCheck() { + return ( + + + + ); +} + // Same "todo-karten" product Pricing.tsx reads further down the page — // this is just a compact early teaser so the hero's CTA isn't asking for // a click without saying what it costs. Delivery time is repeated here too @@ -94,8 +107,8 @@ export async function TodoKartenHero() {
      {checklist.map((item) => ( -
    • - +
    • + {item}
      • ))}