[product-owner]
Summary
When a user prints the Budget Overview page, each budget line shows only its confidence/quoted/invoiced badge. The budget-source identification (the colored badge that names the source like "Personal Savings" or "Bank Loan") is invisible in print.
Reproduction
- Open
/budget/overview with sample data containing budget lines from at least two sources.
- Trigger the browser print preview (Cmd/Ctrl-P) or call
window.print().
- Observe that budget-line rows show only the
own_estimate/quoted/invoiced badge — no source name appears next to it.
Root Cause (notes for the dev-team-lead spec)
In client/src/components/CostBreakdownTable/CostBreakdownTable.tsx BudgetLineRow (lines 199-284), each line renders both <span className={styles.sourceBadgeDot}> and <span className={styles.sourceBadgeLabel}>…<Badge … /></span>.
In CostBreakdownTable.module.css (lines 787-805):
.sourceBadgeDot is display: none outside the mobile breakpoint.sourceBadgeLabel is hidden via @media (max-width: 767px)
Browsers render print pages at ~600-720 CSS pixels, which usually triggers the mobile media query — so the label is hidden, leaving only the dot, whose colored background is dropped by default in print.
Expected Behavior
When the user prints the Budget Overview page, every budget line shows the source name (the labeled badge) next to its confidence/quoted/invoiced badge — same way it appears on desktop screens. Confidence levels and the source badge are both visible.
Acceptance Criteria
Notes
- Priority: Should Have
- Parent Epic: None (EPIC-05 Budget Management is closed/Done; no active Budget epic). Standalone bug.
- Type: Print-mode CSS bug fix.
[product-owner]
Summary
When a user prints the Budget Overview page, each budget line shows only its confidence/quoted/invoiced badge. The budget-source identification (the colored badge that names the source like "Personal Savings" or "Bank Loan") is invisible in print.
Reproduction
/budget/overviewwith sample data containing budget lines from at least two sources.window.print().own_estimate/quoted/invoicedbadge — no source name appears next to it.Root Cause (notes for the dev-team-lead spec)
In
client/src/components/CostBreakdownTable/CostBreakdownTable.tsxBudgetLineRow(lines 199-284), each line renders both<span className={styles.sourceBadgeDot}>and<span className={styles.sourceBadgeLabel}>…<Badge … /></span>.In
CostBreakdownTable.module.css(lines 787-805):.sourceBadgeDotisdisplay: noneoutside the mobile breakpoint.sourceBadgeLabelis hidden via@media (max-width: 767px)Browsers render print pages at ~600-720 CSS pixels, which usually triggers the mobile media query — so the label is hidden, leaving only the dot, whose colored background is dropped by default in print.
Expected Behavior
When the user prints the Budget Overview page, every budget line shows the source name (the labeled badge) next to its confidence/quoted/invoiced badge — same way it appears on desktop screens. Confidence levels and the source badge are both visible.
Acceptance Criteria
print-color-adjust: exactfor source badges, or via a print-mode style that uses borders/text without relying on background-color, whichever the implementer prefers).Notes