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 ( -
+
enthält {g.rate}% MwSt.: {formatPrice(g.tax)}
); } return ( -enthält MwSt.:
{groups.map((g) => ( -