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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user