From b2bffd13a3bdaac9b0cc88ee56be806e463ce0b0 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 22 Jul 2026 23:31:10 +0000
Subject: [PATCH] Fix MwSt./Versand line wrapping onto two lines in narrow
 pricing panels

"inkl. X% MwSt. zzgl. Versand" got long enough (once the rate is spelled
out) that sharing a flex row with the price wrapped mid-sentence in
Pricing.tsx's/ProductSpotlight's narrow columns. Moved onto its own line
instead of inline next to the price.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/components/ProductSpotlight.tsx   | 5 ++++-
 app/todo-cards/components/Pricing.tsx | 7 ++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/components/ProductSpotlight.tsx b/app/components/ProductSpotlight.tsx
index 94d0f3e..00196c3 100644
--- a/app/components/ProductSpotlight.tsx
+++ b/app/components/ProductSpotlight.tsx
@@ -79,14 +79,17 @@ export async function ProductSpotlight() {
           <p className="text-body text-text-body">
             {product.spotlightText || product.description}
           </p>
+          {/* MwSt./Versand disclosure on its own line, not crammed into
+              the price row itself — same reasoning as todo-cards'
+              Pricing.tsx (identical text, same narrow-column risk). */}
           <div className="flex flex-col gap-1 items-start">
             <div className="flex gap-2 items-baseline">
               {discount !== null && (
                 <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
               )}
               <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
-              <p className="text-label text-text-muted">inkl. {taxRate}% MwSt. zzgl. Versand</p>
             </div>
+            <p className="text-label text-text-muted">inkl. {taxRate}% MwSt. zzgl. Versand</p>
             <p className="text-label text-text-muted">
               Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
             </p>
diff --git a/app/todo-cards/components/Pricing.tsx b/app/todo-cards/components/Pricing.tsx
index 2dc39f8..ba87005 100644
--- a/app/todo-cards/components/Pricing.tsx
+++ b/app/todo-cards/components/Pricing.tsx
@@ -79,14 +79,19 @@ export async function Pricing() {
         </div>
 
         <div className="flex flex-col gap-3 items-start w-full lg:w-[18.75rem] lg:shrink-0">
+          {/* MwSt./Versand disclosure on its own line, not crammed into
+              the price row itself — "inkl. X% MwSt. zzgl. Versand" is
+              long enough (once the rate is spelled out) that sharing a
+              row with the price in this panel's narrow fixed-width
+              column wrapped it mid-sentence onto a second line. */}
           <div className="flex flex-col gap-1 items-start">
             <div className="flex gap-2 items-baseline">
               {discount !== null && (
                 <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
               )}
               <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
-              <p className="text-label text-text-muted">inkl. {taxRate}% MwSt. zzgl. Versand</p>
             </div>
+            <p className="text-label text-text-muted">inkl. {taxRate}% MwSt. zzgl. Versand</p>
             <p className="text-label text-text-muted">
               Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
             </p>