Keep the newsletter icon above the text through the whole tablet range

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>
This commit is contained in:
Marco
2026-07-30 21:27:26 +00:00
parent a036c89291
commit 7baf8f9e24
+7 -5
View File
@@ -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