Design refinement: align budget app with v3 Pencil mocks#2
Merged
Conversation
raycashmore
force-pushed
the
design-refinement
branch
2 times, most recently
from
68bc998 to
bcd70b2
Compare
Move mortgageContrib to helpers.ts so it can be shared, update monthlyBreakdown.ts to import it from there, and extend listBudgetChart to join mortgage rows via carry-forward so each chart point includes a mortgage field. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…to viewport width
Previously the chart used a fixed 1200x600 viewBox stretched with
preserveAspectRatio=none, which squashed axis text horizontally and
garbled month names ("Juno", "Aept"). Wrap the SVG in ParentSize
so it draws at the real container dimensions, bump axis text to 11px
DM Sans, widen the left margin for currency labels, and split the
component so the header stays outside the measurement target.
Sampling 6 evenly-spaced indices through 8 months landed on 0,1,3,4,6,7 — dropping Aug and Nov. For periods of 12 months or fewer, show a label for every bar; only sample when the chart spans more than a year.
Previously the chart and breakdown carried the mortgage value forward from the mortgage table (contrib1+contrib2+contrib3), which is a much larger debt-repayment figure that swamped income/spend on the chart. The mortgage value shown in the chart and the breakdown is now the positive sum of the budget row's variable and fixed line items, so it sits naturally on the same scale as discretionary spend. - Add budgetMortgagePortion helper (clamps variable+fixed at zero) - listBudgetChart drops the mortgage carry-forward join - joinBudgetWithMortgage -> buildMonthlyBreakdown; mortgage is now always a number, not number | null - Update BudgetBreakdownTable + tests accordingly
These fields are stored as negative numbers (expenses), so summing them gave a negative which the previous clamp turned into zero. Use |variable| + |fixed| so a typical month registers as ~$4,800 of mortgage spend rather than $0.
raycashmore
force-pushed
the
design-refinement
branch
from
bcd70b2 to
a0b4d98
Compare
raycashmore
changed the title
raycashmore
added a commit
that referenced
this pull request
May 19, 2026
Design refinement: align budget app with v3 Pencil mocks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes the visual gap between the budget app and the v3 Pencil designs (
design/v2.penframesa6m9ikdesktop /A7fHNXmobile /QPjOtoverlay) and lands several functional fixes along the way.Chart
|budget.variable| + |budget.fixed|per month — the priormortgage.contrib1+2+3carry-forward was an order of magnitude larger and swamped the y-axis. With real data this lands around $4.8k/month.ParentSizemeasurement so axis labels render at real 11px DM Sans (previously a fixed 1200×600 viewBox was stretched withpreserveAspectRatio="none", squashing labels to ~5px and garbling month names).Jun,Jul, …); labels every month when range ≤ 12, sampled otherwise.Layout
flex-1 min-h-0; bottom aligns with Insights panel on desktop.MonthlyDetailOverlay) now occupies 85vh with a sticky header and a scrollable body.Mobile
min-w-0added to flex children that needed it; chart header wraps; the breakdown table scrolls horizontally inside its card.Backend
listBudgetChartreturns a fourth field,mortgage, derived frombudgetMortgagePortion(row) = |variable| + |fixed|.joinBudgetWithMortgagerenamed tobuildMonthlyBreakdown; no longer joins the mortgage table since the value comes from the budget row directly.mortgageis nownumberinstead ofnumber | null.Test Plan
pnpm --filter @repo/convex test— 33 tests pass (includes the newbuildMonthlyBreakdowntests covering negative-magnitude and zero cases).pnpm --filter budget test— 23 tests pass.pnpm check-types— clean across all packages.pnpm lint— clean.Notes
fontWeight: 700on serif text is ornamental. Heading weight in the implementation comes from the larger sizes.🤖 Generated with Claude Code