Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Break NewsletterModal at lg: instead of sm:

Browse Source 
The dialog is capped at max-w-[75rem] (1200px), so at real Tablet
viewports (640-1023px) it's essentially full-viewport-width — too
little room per column at sm: for the heading/form or the 3 feature
cards to read well. Stacked through the whole Tablet range now,
side by side again only from lg: up.
This commit is contained in:
Marco
2026-07-29 11:32:09 +00:00
parent a9c8344472
commit e0299713f5
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/NewsletterModal.tsx
+19 -7
View File
@@ -156,14 +156,22 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
<Image alt="" src="/icon-close.png" width={24} height={24} className="size-full object-contain" />
</button>
{/* modal-top: photo + copy/form, stacked below sm (moved down from the old md:) */}
<div className="flex flex-col sm:flex-row items-stretch border-b border-border">
<div className="relative w-full sm:flex-1 aspect-[4/3] sm:aspect-auto">
{/* modal-top: photo + copy/form, stacked below lg: — a deliberate
exception to the site's sm: (640px) structural consolidation
(see the figma-to-nextjs skill's Gotcha 5): this dialog is
capped at max-w-[75rem] (1200px), so at real Tablet viewports
(640-1023px) it's essentially full-viewport-width, leaving too
little room per column at sm: for the heading/form to read well
(reported 2026-07-29). Stacked (full-width photo above, copy/
form below) through the whole Tablet range instead, side by
side again only once there's real room at lg:. */}
<div className="flex flex-col lg:flex-row items-stretch border-b border-border">
<div className="relative w-full lg:flex-1 aspect-[4/3] lg:aspect-auto">
<Image
src="/newsletter-modal-photo.jpg"
alt="Notizbuch mit Kaffee und Stift"
fill
sizes="(min-width: 640px) 50vw, 100vw"
sizes="(min-width: 1024px) 50vw, 100vw"
className="object-cover"
/>
</div>
@@ -172,8 +180,10 @@ 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. Hidden below sm: — removed on mobile 2026-07-24. */}
<div className="hidden sm:block w-16 h-14 -rotate-4 -scale-y-100">
flipped. Hidden below lg: — removed on mobile 2026-07-24,
threshold moved down with the rest of this section's
lg: exception 2026-07-29. */}
<div className="hidden lg:block w-16 h-14 -rotate-4 -scale-y-100">
<Image alt="" src="/newsletter-icon.svg" width={64} height={56} className="w-full h-full" />
</div>
@@ -263,7 +273,9 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
items-start + a fixed icon bounding box (icons have different
native proportions, e.g. the sparkle glyph isn't square) fixes
it without needing the flip trick. */}
<div className="flex flex-col sm:flex-row items-start px-8 md:px-20 py-6 md:py-9 gap-8 sm:gap-6">
{/* Same lg: exception as modal-top above, for the same fixed
max-w-[75rem] dialog reason. */}
<div className="flex flex-col lg:flex-row items-start px-8 md:px-20 py-6 md:py-9 gap-8 lg:gap-6">
{features.map((f) => (
<div key={f.title} className="flex-1 flex gap-6 items-start w-full">
<div className="relative h-10 w-10 shrink-0 flex items-center justify-center">