From c8cf6ae10d0ac660c68b0c846ec6cad20585cc62 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 22:05:40 +0000
Subject: [PATCH] Fix trust-badge title/description misalignment, cap
 order-confirmation card width at tablet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TrustRow.tsx: reserve 2 lines of height for the title below lg: so the
description starts at the same y-position regardless of whether that
badge's own title happened to wrap to 1 or 2 lines in its narrow
stacked column.

BestellbestaetigungContent.tsx: same fix category as NewsletterModal's
dialog width cap — max-w-[56rem] doesn't constrain anything below
896px, so the order-details card stretched full width through the
640-1023px tablet range. Added max-w-[36rem] there, widening to the
real cap only once lg:'s sidebar split needs the room.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../components/BestellbestaetigungContent.tsx        | 10 +++++++++-
 app/components/TrustRow.tsx                          | 12 +++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/bestellbestaetigung/components/BestellbestaetigungContent.tsx b/app/bestellbestaetigung/components/BestellbestaetigungContent.tsx
index b88c21b..0b32894 100644
--- a/app/bestellbestaetigung/components/BestellbestaetigungContent.tsx
+++ b/app/bestellbestaetigung/components/BestellbestaetigungContent.tsx
@@ -189,9 +189,17 @@ export function BestellbestaetigungContent({ defaultTaxRate }: { defaultTaxRate:
         // already switches at sm: — intentional, not an inconsistent
         // leftover: the inner row has no fixed-width sidebar to fight for
         // room against, just two flexible columns.
+        //
+        // max-w-[36rem] between sm and lg (same fix/value as
+        // NewsletterModal.tsx's own dialog cap) — max-w-[56rem] (896px)
+        // doesn't actually constrain anything below that viewport width,
+        // so at real Tablet widths (640-1023px) this card stretched to
+        // fill the full page width instead of reading as a compact,
+        // centered card. Widens to the real 56rem cap only once lg:'s
+        // sidebar split kicks in and needs the room.
         <Reveal
           delay={0.05}
-          className="w-full max-w-[56rem] mx-auto bg-bg-base border border-border rounded-md overflow-hidden flex flex-col lg:flex-row mb-16"
+          className="w-full max-w-[36rem] lg:max-w-[56rem] mx-auto bg-bg-base border border-border rounded-md overflow-hidden flex flex-col lg:flex-row mb-16"
         >
           <div className="flex-1 p-6 md:p-8 flex flex-col sm:flex-row gap-8">
             {/* Order meta */}
diff --git a/app/components/TrustRow.tsx b/app/components/TrustRow.tsx
index dfe58ff..c97198a 100644
--- a/app/components/TrustRow.tsx
+++ b/app/components/TrustRow.tsx
@@ -34,7 +34,17 @@ export async function TrustRow() {
                 <Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
               </div>
               <div className="flex flex-col gap-0.5 items-center min-w-0 lg:items-start">
-                <p className="font-semibold text-body text-text-primary lg:whitespace-nowrap">{item.title}</p>
+                {/* min-h reserves 2 lines worth of height (text-body's
+                    line-height is 1.6rem) below lg: — titles are short
+                    enough that some wrap to 2 lines in their narrow
+                    stacked column and some don't, and without a reserved
+                    height the description below started at a different
+                    y-position from one badge to the next depending on
+                    whether its own title happened to wrap. Reset to
+                    min-h-0 at lg: (whitespace-nowrap there forces a
+                    single line anyway, so the reservation would just add
+                    unwanted empty space). */}
+                <p className="font-semibold text-body text-text-primary min-h-[3.2rem] lg:min-h-0 lg:whitespace-nowrap">{item.title}</p>
                 <p className="text-body-sm text-text-muted lg:whitespace-nowrap">{item.description}</p>
               </div>
             </div>