[Mobile] Budget table revamp

[joel-jeremy]

[netlify[bot]]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	4fba43fc235cef8157d378834a3dd9b45137e2d5
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/665d70e45c1e0c0008526e97
😎 Deploy Preview	https://deploy-preview-2642.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions[bot]]

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
9	4.72 MB → 4.74 MB (+23 kB)	+0.48%

Changeset

File	Δ	Size
node_modules/auto-text-size/dist/index.mjs	🆕 +8.99 kB	0 B → 8.99 kB
src/components/mobile/budget/BudgetTable.jsx	📈 +15.54 kB (+46.84%)	33.17 kB → 48.71 kB
src/components/common/Text.tsx	📈 +80 B (+33.20%)	241 B → 321 B
src/components/common/Label.tsx	📈 +88 B (+31.21%)	282 B → 370 B
src/components/modals/ReportBalanceMenuModal.tsx	📈 +95 B (+5.72%)	1.62 kB → 1.71 kB
src/components/modals/RolloverBalanceMenuModal.tsx	📈 +95 B (+5.50%)	1.69 kB → 1.78 kB
src/components/modals/ScheduledTransactionMenuModal.tsx	📈 +108 B (+4.94%)	2.14 kB → 2.24 kB
node_modules/react-dom/index.js	📈 +7 B (+1.55%)	453 B → 460 B
src/components/modals/ReportBudgetMenuModal.tsx	📈 +33 B (+1.44%)	2.23 kB → 2.26 kB
src/components/modals/RolloverBudgetMenuModal.tsx	📈 +33 B (+1.44%)	2.23 kB → 2.27 kB
src/components/budget/report/ReportComponents.tsx	📈 +132 B (+1.19%)	10.84 kB → 10.97 kB
src/components/budget/rollover/RolloverComponents.tsx	📈 +132 B (+1.04%)	12.34 kB → 12.47 kB
package.json	📈 +29 B (+1.00%)	2.85 kB → 2.87 kB
src/style/themes/dark.ts	📈 +35 B (+0.49%)	7 kB → 7.03 kB
src/style/themes/midnight.ts	📈 +33 B (+0.48%)	6.76 kB → 6.79 kB
src/style/themes/light.ts	📈 +34 B (+0.47%)	7.08 kB → 7.11 kB
src/style/themes/development.ts	📈 +25 B (+0.35%)	6.95 kB → 6.97 kB
src/components/tooltips.tsx	📈 +24 B (+0.29%)	8.02 kB → 8.04 kB
src/components/PrivacyFilter.tsx	📈 +6 B (+0.19%)	3.11 kB → 3.11 kB
src/components/payees/PayeeMenu.tsx	📈 +2 B (+0.15%)	1.34 kB → 1.35 kB
src/components/budget/report/budgetsummary/Saved.tsx	📈 +2 B (+0.08%)	2.58 kB → 2.59 kB
src/components/budget/rollover/budgetsummary/TotalsList.tsx	📈 +2 B (+0.05%)	3.7 kB → 3.71 kB
src/components/modals/AccountMenuModal.tsx	📈 +2 B (+0.04%)	4.73 kB → 4.73 kB
src/components/modals/CategoryMenuModal.tsx	📈 +2 B (+0.04%)	4.86 kB → 4.86 kB
src/components/modals/CategoryGroupMenuModal.tsx	📈 +2 B (+0.03%)	5.61 kB → 5.61 kB
node_modules/react-aria-components/dist/import.mjs	📈 +7 B (+0.03%)	19.83 kB → 19.84 kB
node_modules/@react-aria/overlays/dist/import.mjs	📈 +14 B (+0.02%)	66.95 kB → 66.96 kB
src/components/modals/GoCardlessExternalMsg.tsx	📈 +2 B (+0.02%)	9.78 kB → 9.78 kB
src/components/manager/BudgetList.jsx	📈 +2 B (+0.02%)	9.92 kB → 9.92 kB
src/components/schedules/SchedulesTable.tsx	📈 +2 B (+0.02%)	9.93 kB → 9.94 kB
src/components/table.tsx	📈 +4 B (+0.02%)	24.26 kB → 24.26 kB
node_modules/@react-spring/shared/dist/react-spring_shared.modern.mjs	📈 +4 B (+0.01%)	27.69 kB → 27.69 kB
src/components/modals/EditRule.jsx	📉 -2 B (-0.01%)	34.5 kB → 34.5 kB
node_modules/lodash.debounce/index.js	📉 -8 B (-0.07%)	10.66 kB → 10.65 kB
src/components/rules/RuleRow.tsx	📉 -4 B (-0.08%)	5.14 kB → 5.14 kB
src/components/budget/rollover/budgetsummary/ToBudgetAmount.tsx	📉 -2 B (-0.10%)	1.92 kB → 1.92 kB
src/components/common/Tooltip.tsx	📉 -2 B (-0.15%)	1.31 kB → 1.31 kB
src/components/mobile/budget/ListItem.tsx	📉 -2 B (-0.48%)	414 B → 412 B
src/components/budget/BalanceWithCarryover.tsx	📉 -68 B (-4.23%)	1.57 kB → 1.5 kB
src/components/common/Modal.tsx	📉 -1.29 kB (-11.80%)	10.9 kB → 9.61 kB
node_modules/usehooks-ts/dist/index.js	📉 -1.17 kB (-52.17%)	2.25 kB → 1.07 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/narrow.js	59.97 kB → 75.5 kB (+15.54 kB)	+25.91%
static/js/index.js	3 MB → 3.01 MB (+7.21 kB)	+0.23%
static/js/wide.js	263.11 kB → 263.37 kB (+264 B)	+0.10%

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
static/js/indexeddb-main-thread-worker-e59fee74.js	13.5 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/usePreviewTransactions.js	790 B	0%
static/js/AppliedFilters.js	20.41 kB	0%
static/js/ReportRouter.js	1.23 MB	0%

[github-actions[bot]]

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Total bundle size	% Changed
1	1.2 MB	0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
kcab.worker.js	1.2 MB	0%

[jsehnoutka]

I think this doesn't work very well with bigger amounts in the budget (decimals do not show).

PR:

Current state:

[joel-jeremy]

@jsehnoutka Thanks for the feedback! Pushed some changes to resize text when amount gets too long

[jsehnoutka]

@joel-jeremy Looks great now, thanks for your work!

Would it be possible to leave the same amount of characters available for the category name though? Maybe put the new > UI element a little bit to the right and assign fixed position to it?

There are now less characters available for the category name before the line breaks, also the > UI element does not look very streamlined because it shows on different positions depending on the category name length. I think it would look better if it had consistent place on each line (category), nevertheless the text lenght.

Before:

After:

[Teprifer]

Agree, category chevron would look best aligned with the group chevron.

Not too sure about it changing alignment between groups, but when aligned with the group one you'll know the position will always work for the categories within the group as the group level totals the values underneath so will always have the widest numbers.

[joel-jeremy]

Something like this?

[Teprifer]

Something like this?

Yeah, it removes the higgilitypiggilty (I'm assuming the blank space is part of the tapable area).

[joel-jeremy]

Pushed an update

I'm assuming the blank space is part of the tapable area

Yes it's tapable

[jsehnoutka]

Looks great now, but still kills a lot of the characters available for category naming.

If there is any possibility to leave this in the state it was before the PR, that would be great.

[youngcw]

I not sure what I think about the lined up category arrows. Im fine with all the other changes though

[joel-jeremy]

I'm also torn on lining up the cheverons on the group/category names. Lining them up looks good visually but also kinda wastes some space. I'm a leaning a bit towards not lining them up since that's how the desktop does it in the desktop budget table.

More feedback would be good here.

[MatissJanis]

Looks really, really good!

Some notes (feel free to ignore if you disagree):

• [ ] the chevron for "to budget" is missing right padding (screenshot 1)
• [ ] the purple triangle is overlaying the budgeted number (possibly unrelated to this PR; screenshot 1)
• [x] balance pill hover: it has an underline; whereas the other pills do not have underlines (I think none of the pills on mobile should have underlines)
• [x] I like that we have the category/group chevrons - it makes it easier to understand that the categories can be clicked; and if I had to pick between aligned chevrons and un-aligned - I'd pick the aligned version (i.e. what you have right now)
• [x] the budgeted and balance numbers in headers sometimes break in 2 lines - we should prevent that (screenshot 2)

[psybers]

Why was it changed to use a chevron on the right? To me, this makes it a bit confusing because now that chevron is being used for two purposes:

Here, the left chevron means you can expand the group. The right one means you can pop up a dialog.

[psybers]

And I guess this is just a bigger design question, as now there are chevrons all over and that apparently means "you can click on this". But it does somewhat confuse the viewer because chevrons mean "expand this" in some contexts.

The old style with underlines was clear: underlined text are links, you can click on those.

[MatissJanis]

One more note:

• [ ] the "0.00" amount is almost invisible to the naked eye - would be good to bump up the contrast there (screenshot 1)

Other than that this looks really good!

[joel-jeremy]

@MatissJanis Any pending @psybers @youngcw @Teprifer @jsehnoutka Any pending feedback on this?

[psybers]

@joel-jeremy Although it looks nice, having the chevrons lined up on the right makes it less obvious they are connected to the text to the left of them and thus it is much less obvious that the whole thing is one giant link.

For example, here:

It is not obvious what clicking on the text will do. Since it is closer to the triangle, it feels like it would trigger that effect and not the chevron's effect.

But in terms of the code, most looks fine. It is hard to mentally parse the diff for the budget table since it is so long, but I can't spot any obvious issues.

[psybers]

The hover effect:

Makes the chevron almost disappear. It probably needs a different color when the link is being hovered.

[MatissJanis]

Tested on iPhone 14: worked as expected. And the design is much better than before. I'm very happy with the changes you've done here and at this point I'd recommend merging it in ASAP (after v24.6.0 release). We can always iterate on the design afterwards.

As for code review: let me know if you'd want me to do it. Happy to help with that too, but you might have to wait a while longer for my review (my current started-and-not-finished review queue is quite long already, so I'm trying to get through those first before picking up new things..). So if someone reviews and approves in the meantime - that's ok too :)

[jsehnoutka]

I think this is a huge step forward regarding design. Great job! And thanks for adressing my concern with the available category text lenght :)

[joel-jeremy]

@MatissJanis @psybers I think this is ready for another round of review and/or get merged to the edge so we can collect the most feedback until next release.