diff --git a/app/components/VatBreakdown.tsx b/app/components/VatBreakdown.tsx
index 8b91904..0711a4b 100644
--- a/app/components/VatBreakdown.tsx
+++ b/app/components/VatBreakdown.tsx
@@ -4,33 +4,37 @@ import type { TaxBreakdownGroup } from "../lib/taxBreakdown";
 // The actual amount of VAT included in a total — not just a disclosure
 // that VAT is included (see cartTotals.ts's effectiveTaxRate() for the
 // "which %" shown next to each line item elsewhere). One line per rate
-// when a cart/order spans more than one; a single line otherwise. Each
-// line is a flex row with a spacer (same "label, flex-1 spacer, value"
-// shape as every other Zwischensumme/Versand/Gesamtsumme row in the
-// sidebars this renders inside) so every € amount lands on the same
-// right-hand edge — a plain "X%: Y €" text line left the amount starting
-// wherever the rate's own digit count happened to end, visibly misaligned
-// as soon as two different rates (e.g. "7%" vs "19%") were both present.
+// when a cart/order spans more than one; a single line otherwise.
+//
+// `self-start` (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).
 export function VatBreakdown({ groups }: { groups: TaxBreakdownGroup[] }) {
   if (groups.length === 0) return null;
   if (groups.length === 1) {
     const [g] = groups;
     return (
-      <div className="flex items-center w-full">
-        <span className="text-label text-text-muted">enthält {g.rate}% MwSt.</span>
-        <span className="flex-1" />
-        <span className="text-label text-text-muted">{formatPrice(g.tax)}</span>
-      </div>
+      <p className="self-start text-label text-text-muted">
+        enthält {g.rate}% MwSt.: {formatPrice(g.tax)}
+      </p>
     );
   }
   return (
-    <div className="flex flex-col gap-0.5 w-full">
+    <div className="self-start 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-center w-full pl-2">
-          <span className="text-label text-text-muted">{g.rate}%</span>
-          <span className="flex-1" />
-          <span className="text-label text-text-muted">{formatPrice(g.tax)}</span>
+        <div key={g.rate} className="flex items-baseline gap-1.5 pl-2">
+          <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>
       ))}
     </div>