From a7fa0ec02722cf4022fa5e9da165e35829136012 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sat, 25 Jul 2026 17:52:13 +0000
Subject: [PATCH] Reserve space for newsletter-modal error text so the photo
 doesn't resize

The modal's left photo stretches (items-stretch, md:aspect-auto) to
match the right column's height. The "already subscribed"/invalid-email
messages were conditionally mounted, so their appearance grew the right
column and dragged the photo's height along with it. Both are now
always rendered with a reserved min-height instead, so toggling them no
longer changes the modal's size.

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

diff --git a/app/components/NewsletterModal.tsx b/app/components/NewsletterModal.tsx
index f6fb054..6774338 100644
--- a/app/components/NewsletterModal.tsx
+++ b/app/components/NewsletterModal.tsx
@@ -207,9 +207,13 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
                       emailError ? "border-red-600 focus:border-red-600" : "border-border focus:border-brand"
                     }`}
                   />
-                  {emailError && (
-                    <p className="text-label text-red-600 font-normal -mt-2">{emailError}</p>
-                  )}
+                  {/* Always rendered (min-h reserves one line's worth of
+                      space) rather than conditionally mounted — this sits
+                      inside the same row the photo on the left stretches
+                      to match (items-stretch, md:aspect-auto), so an error
+                      popping in and out used to grow/shrink the whole
+                      modal, visibly resizing the photo along with it. */}
+                  <p className="text-label text-red-600 font-normal -mt-2 min-h-[1.05rem]">{emailError}</p>
                   <button
                     type="submit"
                     disabled={status === "submitting"}
@@ -239,9 +243,12 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
                     .
                   </span>
                 </label>
-                {status === "error" && (
-                  <p className="text-label text-red-600 font-normal">{error}</p>
-                )}
+                {/* Same reserved-space fix as emailError above — this is
+                    the "already subscribed" message, the one that actually
+                    prompted it. */}
+                <p className="text-label text-red-600 font-normal min-h-[1.05rem]">
+                  {status === "error" ? error : ""}
+                </p>
               </form>
             )}
           </div>