From 02c3fef9b28d62a32d405f6d905c4e8af07be291 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 22 Jul 2026 23:53:19 +0000
Subject: [PATCH] Pin VAT breakdown to the right edge, under the Gesamtsumme
 amount
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

self-end instead of self-start so the block sits directly beneath the
total's € amount (same right edge) rather than flush left. Dropped the
per-rate rows' pl-2 indent to match — now flush with the "enthält MwSt:"
label above them instead of offset from it.
---
 app/components/VatBreakdown.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/components/VatBreakdown.tsx b/app/components/VatBreakdown.tsx
index 0711a4b..54e6bd4 100644
--- a/app/components/VatBreakdown.tsx
+++ b/app/components/VatBreakdown.tsx
@@ -6,33 +6,36 @@ 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` (not `w-full`/`flex-1` spacer) — an earlier version
+// `self-end` (not `w-full`/`flex-1` spacer) — an earlier version
 // right-aligned each € amount by spanning the row edge-to-edge across the
 // full summary panel, matching the Gesamtsumme total line above it. That
 // made this secondary "enthält X% MwSt." hint visually disconnect from
 // its own label whenever the panel was wide, dragging the amount far off
-// to the right. Sized to its own content instead: the rate column is a
-// fixed width (`w-8`) and right-aligned with `tabular-nums` (equal-width
-// digits) so a single-digit rate like "7%" lines up with a two-digit one
-// like "19%" — same alignment guarantee as before, without stretching the
-// block itself. `self-start` overrides the parent
-// flex-col's default stretch (both call sites are plain `flex flex-col`
-// with no `items-start`, so children fill its width unless told not to).
+// to the right. Sized to its own content instead and pinned to the right
+// edge with `self-end`, so the whole block sits directly under the
+// Gesamtsumme € amount above it (same right edge) rather than starting
+// flush with the panel's left side. No `pl-2` indent on the per-rate rows
+// either — since the block itself is now shrink-wrapped to its content
+// width, an indent there would misalign the rows against the "enthält
+// MwSt:" label sitting right above them; both start at the same x now.
+// The rate column is still a fixed width (`w-8`) and right-aligned with
+// `tabular-nums` (equal-width digits) so a single-digit rate like "7%"
+// lines up with a two-digit one like "19%".
 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">
+      <p className="self-end text-label text-text-muted">
         enthält {g.rate}% MwSt.: {formatPrice(g.tax)}
       </p>
     );
   }
   return (
-    <div className="self-start flex flex-col gap-0.5">
+    <div className="self-end flex flex-col gap-0.5">
       <p className="text-label text-text-muted">enthält MwSt.:</p>
       {groups.map((g) => (
-        <div key={g.rate} className="flex items-baseline gap-1.5 pl-2">
+        <div key={g.rate} className="flex items-baseline gap-1.5">
           <span className="w-8 shrink-0 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>
         </div>