fix(budget): remove hero card and fix printout source badge (#1389, #1390)

[steilerDev]

Summary

• Bug: Remove Budget Health hero card from Budget Overview page #1389 — Remove the "Budget Health" hero card from /budget/overview and delete every code path exclusively used by it (helpers, state, callbacks, computed values, CSS classes, hero-card-only i18n keys). The page now renders the SubNav, empty-state, and Cost Breakdown Table — no metrics row, stacked bar, or remaining detail panel.
• Bug: Budget source name missing from Budget Overview printout #1390 — Fix the Budget Overview printout: print viewports trigger the mobile breakpoint that hides the named source badge label in CostBreakdownTable, so the printed page only showed confidence levels. Added print-mode rules that force the label visible and the dot hidden, with a border-based legibility treatment so the source name prints without relying on background colors.

Fixes #1389
Fixes #1390

Test plan

• Unit tests updated: 27 hero-card cases removed, 1 source-badge DOM test added (committed in b8149c66)
• E2E smoke spec added: e2e/tests/budget/budget-overview-no-hero-card.spec.ts covers hero-card absence and source-badge presence (committed in 8db95d06, fixture fixed in this commit)
• expectedPayback retained in both en/de locales (still used by BudgetCostOverview)
• Quality Gates green

[steilerDev]

[product-architect] Approved.

Scope: Pure removal (Budget Health hero card) + targeted CSS print fix on CostBreakdownTable. No API contract, schema, or ADR impact — correctly so.

Verified:

• Dead code / orphan styles: Clean. Grepped BudgetOverviewPage.module.css for heroCard, metric*, barWrapper, barTooltip, segmentTooltip, mobileBar*, mobileDetail, remainingPanel*, footerItem, paybackCappedNote — zero leftovers. The metricsRowWithPayback mobile media-query block was correctly removed alongside the desktop rule.
• i18n cleanup: All 30 deleted keys (availableFunds, projectedCostRange, paybackCapped, remaining*, categories*, bars.*, remainingPerspectives.*, ofAvailableFunds) have zero remaining references in client/src/. expectedPayback correctly retained — still consumed by BudgetCostOverview.tsx:96. EN and DE deletions are symmetric.
• Imports: useTranslation, useCallback, useMemo all still legitimately referenced in the trimmed component. No dead imports.
• Print fix scope (#1390): Targets .sourceBadgeLabel / .sourceBadgeDot (both present in the CSS module). The border-based legibility treatment via print-color-adjust: exact is the right approach — independent of bg-color rendering. Scoped inside @media print block, no screen regressions.
• Test parity: New CostBreakdownTable.test.tsx block correctly asserts the DOM contract that the print CSS depends on (jsdom doesn't evaluate @media). New E2E smoke spec asserts hero card absence + source-badge presence; updates to budget-overview.spec.ts, budget-overview-print.spec.ts, and budget-source-filter.spec.ts consistently strip heroCard references.
• POM: BudgetOverviewPage.ts documents that heroCard locator is retained for historical reference (won't match) and waitForLoaded() correctly races on costBreakdownCard instead.

Wiki / contracts: No updates required — this is pure UI removal of a hero card and a CSS-only print fix. No endpoint, schema, or architectural decision changes.

No findings. PR is well-scoped, two commits cleanly attribute to frontend/translator/e2e and qa/e2e respectively, CI is fully green (Quality + E2E + all 16 shards). Ship it.

[steilerDev]

[ux-designer]

Design review for fix(budget): remove hero card and fix printout source badge (#1389, #1390).

---

Summary

Two clean, well-scoped changes. Both pass all critical design-system checks. One informational finding (orphaned responsive overrides) and one positive note on print fix correctness.

---

Hero Card Removal (#1389) — PASS

Token adherence: All hero-card CSS used design tokens throughout. The deletion leaves no hardcoded values behind. ✓

Remaining module integrity: The stripped BudgetOverviewPage.module.css (350 lines → ~25 rules) correctly retains: add dropdown, loading/error/empty states, breakdown loading/refetch, and print chrome suppression. All remaining rules are fully token-compliant. ✓

Page structure after removal: PageLayout → SubNav → empty-state OR breakdown-loading OR CostBreakdownTable. The PageLayout component owns the page heading, so the visual hierarchy is intact: heading → sub-nav tabs → content. No gap or orphaned whitespace. ✓

Dark mode: No on-screen color values introduced. The existing semantic tokens in retained classes switch correctly in [data-theme="dark"]. ✓

Responsive: Mobile and tablet print touch-target rules (min-height: 44px) for addButton and retryButton are retained. ✓

Accessibility: Hero card state (aria-label, live regions) removed along with the section that needed them — no accessibility artifacts left behind. ✓

i18n: Hero-card-only keys removed from both en and de locales. The expectedPayback key used by BudgetCostOverview is intentionally retained — confirmed correct. ✓

---

Informational — Orphaned responsive overrides in BudgetOverviewPage.module.css

Lines 170 and 188–203 contain @media overrides for .container, .pageHeader, and .pageTitle that no longer have base-rule definitions in the file (their base rules were part of the deleted hero-card block). The classes are also not referenced in BudgetOverviewPage.tsx.

/* @media (min-width: 768px) and (max-width: 1024px) { */
  .container { padding: var(--spacing-6); }        /* ← no base .container rule */

/* @media (max-width: 767px) { */
  .container { padding: var(--spacing-4); }        /* ← no base .container rule */
  .pageHeader { flex-direction: column; … }        /* ← no base .pageHeader rule */
  .pageTitle { font-size: var(--font-size-2xl); }  /* ← no base .pageTitle rule */

These dead overrides have no visual effect (the selectors never match anything rendered), so this is informational only — not a blocker. They can be removed in a follow-up tidy-up pass to keep the module clean.

---

Print Source Badge Fix (#1390) — PASS

Token adherence: var(--color-border-strong) used for the print border — correct semantic token. 1pt is consistent with all other pt-unit borders in the same @media print block (e.g. 1.5pt, 3pt, 1pt dotted). ✓

Print-mode logic: The fix correctly addresses the root cause: print viewports are narrower than 768px, triggering the mobile rule that sets .sourceBadgeLabel { display: none } and .sourceBadgeDot { display: inline-block }. The new print-block overrides reverse that with !important, which is the established pattern in this file. ✓

Dark mode: The print rules operate inside @media print, which follows the token reset already defined in BudgetOverviewPage.module.css (:global(@media print) { :root, :root[data-theme="dark"] { --color-border-strong: #d1d5db; … } }). The border value resolves to the correct light-mode gray in print regardless of on-screen theme. The colored badge background is replaced by background: transparent — no color is printed for the background, which is the standard safe behavior for print. ✓

Accessibility (print): Dark text on white paper with a --color-border-strong (#d1d5db) outlined border. The aria-label="Budget source: {name}" on the <Badge> gives screen readers the source name. The visual border is a legibility affordance, not a meaning-bearing color — no contrast concern for print output. ✓

Selector correctness: .sourceBadgeLabel > * targets the <Badge> child directly. The unit test added in CostBreakdownTable.test.tsx verifies the DOM structure (.sourceBadgeDot with aria-hidden="true", .sourceBadgeLabel wrapping the aria-label-bearing badge) that this CSS relies on — a solid contract test. ✓

print-color-adjust: exact is present on the rule that sets background: transparent. This property typically matters for preserving backgrounds; its presence on a rule that removes the background is harmless and matches the pattern already used in the file. ✓

---

Verdict: APPROVED

No blocking or high-severity findings. The orphaned responsive overrides are dead CSS (informational only). The print fix is well-reasoned and correctly implemented. Both changes leave the design system cleaner than before.

[github-actions]

🎉 This PR is included in version 2.5.0-beta.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀