Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Un-stretch VAT breakdown, fix rate-column alignment properly

Browse Source 
The earlier right-alignment fix spanned the row edge-to-edge across the
full summary panel (same width as the Gesamtsumme total line), which
visually disconnected the "enthält X% MwSt." hint from its own amount on
wide panels. Reverted to content-sized (self-start, no w-full/flex-1
spacer), with a fixed-width right-aligned rate column instead so
single-digit rates (7%) still line up with two-digit ones (19%).
This commit is contained in:
Marco
2026-07-22 23:49:58 +00:00
parent 44029cdaad
commit 5e198a30c6
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/VatBreakdown.tsx
+21 -17
View File
@@ -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>