Repository navigation
[Liquid Glass Follow Up][Design] Spend footer total overlapped by the (+) FAB #104206
Description
- Spend footer total overlapped by the (+) FAB - long totals (e.g. high exchange-rate currencies) go under the FAB. Options: truncate with an ellipsis or stack the total under the expense count. Same issue exists with the old tab bar, so it can be handled together with the FAB update. (comment, suggestion)
Action Performed
- Sign in to an account with a currency that has a high exchange rate (e.g. IDR, VND) or many expenses.
- Open the Spend tab on a phone.
- Select a few expenses so the footer shows the selected count and total.
Expected Result
The total amount and its dropdown arrow are fully visible.
Actual Result
A long total runs underneath the (+) floating button and is partly covered.
Notes
- Happens with the new tab bar and with the old one, so it is not a regression but should be fixed alongside the floating button update.
- Two options from design: truncate the total with an ellipsis when it would overlap the button, or stack the total under the expense count, both left aligned, so it never reaches the button.
- Thread: Add liquid glass bottom tab bar to iOS, Android and mWeb #101339 (comment) and Add liquid glass bottom tab bar to iOS, Android and mWeb #101339 (comment)
Platforms
- Android: App
- Android: mWeb Chrome
- iOS: App
- iOS: mWeb Safari
Activity
melvin-bot commentedon Oct 19, 2026
@sumo-slonik Whoops! This issue is 2 days overdue. Let's get this updated quick!
melvin-bot commentedon Oct 21, 2026
@sumo-slonik Eep! 4 days overdue now. Issues have feelings too...
melvin-bot commentedon Oct 23, 2026
@sumo-slonik Still overdue 6 days?! Let's take care of this!
sumo-slonik commentedon Oct 27, 2026
@Expensify/design I mocked up both options from the original thread with a very long total (IDR 98,765,432,109,876.54) so the difference is easy to see:
Which option would you prefer as the solution?
dannymcclain commentedon Oct 27, 2026
I think I personally prefer option B (stacked) so we don't lose any information to truncation. But let's see what the rest of the team thinks!
shawnborton commentedon Oct 27, 2026
I also like Stacked, but I assume we can do it only when we need to? Otherwise we keep them on the same line if the values are shorter?
dubielzyk-expensify commentedon Oct 28, 2026
B looks good agree. Wonder if it looks a bit too prominent on mobile when you see the full screen though? I kinda wonder if we could actually get away with showing only one of the values on mobile given the use cases.
shawnborton commentedon Oct 28, 2026
Fair, maybe we can see the whole screenshot. I do like the idea of only using this though when we don't have enough space. Another thing we can do is remove
spendfromTotal spendto help save space as well.dannymcclain commentedon Oct 28, 2026
Oh yeah I thought this was the plan - I don't think I'd want to stack them all the time if we can avoid it.
melvin-bot commentedon Oct 30, 2026
@sumo-slonik Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!