From 7baf8f9e2463ea8b7fcdbfb584575c6f5ed79e87 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 21:27:26 +0000
Subject: [PATCH] Keep the newsletter icon above the text through the whole
 tablet range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icon+text switched to row layout at sm (640px), but the outer card
already puts this copy column next to the form from that same
breakpoint — squeezed the text through 640-1023px. Row layout for
icon+text now only kicks in at lg, where there's actually room.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/components/Newsletter.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/components/Newsletter.tsx b/app/components/Newsletter.tsx
index 0c6792a..2a98f5a 100644
--- a/app/components/Newsletter.tsx
+++ b/app/components/Newsletter.tsx
@@ -54,13 +54,15 @@ export function Newsletter({
         <Reveal className="bg-bg-muted flex flex-col sm:flex-row gap-8 sm:gap-12 items-center px-8 py-8 sm:py-0 rounded-md w-full max-w-[1280px] mx-auto">
 
           {/* Left: copy — fixed width from sm+ so the form always gets the remaining space.
-              Icon+text stacked (icon on top, centered) below sm: — side by
+              Icon+text stacked (icon on top, centered) below lg: — side by
               side they squeezed the text into a narrow column on a phone
               (icon width + gap eating most of the card's inner width),
-              wrapping awkwardly. Row layout with the icon beside the text
-              is fine again from sm+, where the fixed copy-column width
-              leaves real room. */}
-          <div className="flex flex-col items-center gap-4 text-center w-full sm:flex-row sm:items-start sm:gap-8 sm:text-left sm:w-[var(--newsletter-copy-width)] sm:py-4 sm:shrink-0">
+              wrapping awkwardly, and the same squeeze reappeared through
+              the whole tablet range (640-1023px) once the outer card's own
+              sm:flex-row already put this copy column next to the form —
+              row layout for icon+text is only comfortable once there's
+              real room, i.e. lg+. */}
+          <div className="flex flex-col items-center gap-4 text-center w-full lg:flex-row lg:items-start lg:gap-8 lg:text-left sm:w-[var(--newsletter-copy-width)] lg:py-4 lg:shrink-0">
 
             {/* Decorative envelope icon, tilted -4° as per design.
                 w-[4rem], not w-16 — this project's --spacing-16 is a