From d72102bdf031195d33babd35f9a8daa012dc7a2f Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 23 Jul 2026 00:00:02 +0000
Subject: [PATCH] =?UTF-8?q?VAT=20breakdown:=20rate/amount=20right-aligned?=
 =?UTF-8?q?=20under=20the=20Gesamtsumme=20=E2=82=AC=20amount?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same row shape as the Gesamtsumme total line itself (label left, flex-1
spacer, value right) instead of the grid — label stays flush with
"Gesamtsumme", rate+amount land flush right under the total's own €
figure. Fixed-width rate column keeps multiple rates aligned to each
other regardless of digit count.
---
 app/components/VatBreakdown.tsx | 47 ++++++++++++++-------------------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/app/components/VatBreakdown.tsx b/app/components/VatBreakdown.tsx
index 1ba22f3..010f052 100644
--- a/app/components/VatBreakdown.tsx
+++ b/app/components/VatBreakdown.tsx
@@ -1,4 +1,3 @@
-import { Fragment } from "react";
 import { formatPrice } from "../lib/format";
 import type { TaxBreakdownGroup } from "../lib/taxBreakdown";
 
@@ -7,36 +6,30 @@ import type { TaxBreakdownGroup } from "../lib/taxBreakdown";
 // "which %" shown next to each line item elsewhere). One line per rate
 // when a cart/order spans more than one; a single line otherwise.
 //
-// `self-start` — the block starts flush left, at the same x as
-// "Gesamtsumme" on the total row above it, not pinned under the €
-// amount on the right (tried that, didn't read right against the label).
-//
-// Multi-rate case is a 3-column CSS grid (label / rate / amount), not a
-// flex column — the "enthält MwSt.:" label only occupies row 1's first
-// cell (later rows get an empty cell there), so the first rate sits on
-// the *same line* as the label instead of dropping to its own row below
-// it. Grid (unlike stacked flex rows) sizes each column to the widest
-// cell across every row automatically, so the rate column still lines up
-// a single-digit rate ("7%") under a two-digit one ("19%") without
-// needing an explicit fixed width.
+// Same row shape as the Gesamtsumme total line right above this
+// (`flex w-full` + a `flex-1` spacer): a label on the left, flush with
+// "Gesamtsumme", and the rate/amount pushed flush right so they land
+// directly under the total's own € amount — not tucked in right next to
+// the label. The rate itself gets a fixed-width right-aligned column
+// (`w-8`, `tabular-nums`) so a single-digit rate ("7%") still lines up
+// under a two-digit one ("19%") across rows instead of shifting the
+// amount that follows it. Only the first row carries the "enthält
+// MwSt.:" label; further rates repeat just the rate/amount pair.
 export function VatBreakdown({ groups }: { groups: TaxBreakdownGroup[] }) {
   if (groups.length === 0) return null;
-  if (groups.length === 1) {
-    const [g] = groups;
-    return (
-      <p className="self-start text-label text-text-muted">
-        enthält {g.rate}% MwSt.: {formatPrice(g.tax)}
-      </p>
-    );
-  }
   return (
-    <div className="self-start grid grid-cols-[auto_auto_auto] items-baseline gap-x-1.5 gap-y-0.5">
+    <div className="flex flex-col gap-0.5 w-full">
       {groups.map((g, i) => (
-        <Fragment key={g.rate}>
-          <span className="text-label text-text-muted">{i === 0 ? "enthält MwSt.:" : ""}</span>
-          <span className="text-right text-label text-text-muted tabular-nums">{g.rate}%</span>
-          <span className="text-label text-text-muted tabular-nums">{formatPrice(g.tax)}</span>
-        </Fragment>
+        <div key={g.rate} className="flex items-baseline w-full">
+          <span className="text-label text-text-muted">
+            {groups.length === 1 ? `enthält ${g.rate}% MwSt.` : i === 0 ? "enthält MwSt.:" : ""}
+          </span>
+          <span className="flex-1" />
+          {groups.length > 1 && (
+            <span className="w-8 shrink-0 text-right text-label text-text-muted tabular-nums">{g.rate}%</span>
+          )}
+          <span className="ml-1.5 text-label text-text-muted tabular-nums">{formatPrice(g.tax)}</span>
+        </div>
       ))}
     </div>
   );