Pin VAT breakdown to the right edge, under the Gesamtsumme amount
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.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user