From e0299713f5d084b6b3eb71603bdd081f2f8d2911 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 29 Jul 2026 11:32:09 +0000
Subject: [PATCH] Break NewsletterModal at lg: instead of sm:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 app/components/NewsletterModal.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/components/NewsletterModal.tsx b/app/components/NewsletterModal.tsx
index fba723a..0ae9b70 100644
--- a/app/components/NewsletterModal.tsx
+++ b/app/components/NewsletterModal.tsx
@@ -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">