[Bug]: [Mobile] Footer is not rendered in Add/Edit Transaction page #581

New Issue

GiteaMirror · 2026-02-28T19:10:17-06:00

GiteaMirror commented

2026-02-28 19:10:17 -06:00

Originally created by @joel-jeremy on GitHub (Aug 21, 2023).

Verified issue does not already exist?

I have searched and found no existing issue

What happened?

Footer is not rendered in Add/Edit Transaction page

What error did you receive?

N/A

Where are you hosting Actual?

Fly.io

What browsers are you seeing the problem on?

Chrome

Operating System

Mobile Device

Originally created by @joel-jeremy on GitHub (Aug 21, 2023). ### Verified issue does not already exist? - [X] I have searched and found no existing issue ### What happened? Footer is not rendered in Add/Edit Transaction page ### What error did you receive? N/A ### Where are you hosting Actual? Fly.io ### What browsers are you seeing the problem on? Chrome ### Operating System Mobile Device

GiteaMirror added the bug label 2026-02-28 19:10:17 -06:00

GiteaMirror closed this issue

2026-02-28 19:10:17 -06:00

GiteaMirror commented

2026-02-28 19:10:18 -06:00

@trevdor commented on GitHub (Aug 22, 2023):

Hey @joel-jeremy, I can see how that could feel off.

Not necessarily arguing it's best, but this is by design. It's a behavior ported from the original Actual native apps.
My assumption is it was meant to maximize screen real estate.
You either < Back out of this screen or use the Add/Save Transaction button.
Similarly, we don't display the footer in the account ledger view.

@trevdor commented on GitHub (Aug 22, 2023): Hey @joel-jeremy, I can see how that could feel off. Not necessarily arguing it's best, but this is by design. It's a behavior ported from the original Actual native apps. My assumption is it was meant to maximize screen real estate. You either `< Back` out of this screen or use the `Add/Save Transaction` button. Similarly, we don't display the footer in the account ledger view.

GiteaMirror commented

2026-02-28 19:10:18 -06:00

@shall0pass commented on GitHub (Aug 30, 2023):

I was curious about this. I recorded the Android app screens for reference. Are you talking about the accounts page or the new 'add transaction' page? I was surprised to see the footer all the way through to the the account transaction listings page.
https://github.com/actualbudget/actual/assets/20625555/c0d6d60a-2097-47a4-9f21-14b64fa71080

@shall0pass commented on GitHub (Aug 30, 2023): I was curious about this. I recorded the Android app screens for reference. Are you talking about the accounts page or the new 'add transaction' page? I was surprised to see the footer all the way through to the the account transaction listings page. https://github.com/actualbudget/actual/assets/20625555/c0d6d60a-2097-47a4-9f21-14b64fa71080

GiteaMirror commented

2026-02-28 19:10:18 -06:00

@trevdor commented on GitHub (Sep 1, 2023):

Oh wow, I stand corrected! Sorry, @joel-jeremy for so confidently mis-remembering.

I only matched MobileNavTabs to the screens that made sense to me at the time we added 'em:

<Route path="/budget" element={<MobileNavTabs />} />
<Route path="/accounts" element={<MobileNavTabs />} />
<Route path="/settings" element={<MobileNavTabs />} />

What do you guys think? Does it belong there? It certainly saves taps getting back to Budget view. On the other hand, it eats up screen real estate (looking out for us tiny phone guys...).

@trevdor commented on GitHub (Sep 1, 2023): Oh wow, I stand corrected! Sorry, @joel-jeremy for so confidently mis-remembering. I only matched `MobileNavTabs` to the screens that made sense to me at the time we added 'em: ``` <Route path="/budget" element={<MobileNavTabs />} /> <Route path="/accounts" element={<MobileNavTabs />} /> <Route path="/settings" element={<MobileNavTabs />} /> ``` What do you guys think? Does it belong there? It certainly saves taps getting back to Budget view. On the other hand, it eats up screen real estate (looking out for us tiny phone guys...).

GiteaMirror commented

2026-02-28 19:10:19 -06:00

@shall0pass commented on GitHub (Sep 1, 2023):

Personally, I think it fits there. I did make a mental note that the bar in the RN app is about 1/2 the height as the Web app. Maybe small screens were a concern for James too?

I'm not sure why the + icon was on the accounts page though in the top right, unless he just wanted a visible button. Long pressing the account button on the bar was a shortcut to add a transaction in RN. I suppose adding the button didn't take up any vertical real estate since it was aligned with the account name. In our case, I think two + on the same screen that do the same thing feels redundant.

My 2¢.

@shall0pass commented on GitHub (Sep 1, 2023): Personally, I think it fits there. I did make a mental note that the bar in the RN app is about 1/2 the height as the Web app. Maybe small screens were a concern for James too? I'm not sure why the + icon was on the accounts page though in the top right, unless he just wanted a visible button. Long pressing the account button on the bar was a shortcut to add a transaction in RN. I suppose adding the button didn't take up any vertical real estate since it was aligned with the account name. In our case, I think two + on the same screen that do the same thing feels redundant. My 2¢.

GiteaMirror commented

2026-02-28 19:10:19 -06:00

@Kidglove57 commented on GitHub (Sep 1, 2023):

Just my view but I am happy with the status quo here as I cannot see a need or use for the footer in the "add transaction" or "edit transaction" dialogue screen. Once I have completed and exited from either of these tasks the footer becomes visible again (and I do not need it until then).

@Kidglove57 commented on GitHub (Sep 1, 2023): Just my view but I am happy with the status quo here as I cannot see a need or use for the footer in the "add transaction" or "edit transaction" dialogue screen. Once I have completed and exited from either of these tasks the footer becomes visible again (and I do not need it until then).

GiteaMirror commented

2026-02-28 19:10:20 -06:00

@trevdor commented on GitHub (Sep 1, 2023):

Long pressing the account button on the bar was a shortcut to add a transaction in RN.
TIL! The 4 buttons in the footer feels crowded to me, so I might be inclined to have this back.
https://react-spectrum.adobe.com/react-aria/useLongPress.html

However, the fact I wasn't aware of it might be evidence it's not the most discoverable interaction. Wonder how that could be improved? Anyway, separate question from this thread's main topic.

@trevdor commented on GitHub (Sep 1, 2023): > Long pressing the account button on the bar was a shortcut to add a transaction in RN. TIL! The 4 buttons in the footer feels crowded to me, so I might be inclined to have this back. https://react-spectrum.adobe.com/react-aria/useLongPress.html However, the fact I wasn't aware of it might be evidence it's not the most discoverable interaction. Wonder how that could be improved? Anyway, separate question from this thread's main topic.

GiteaMirror commented

2026-02-28 19:10:20 -06:00

@MatissJanis commented on GitHub (Sep 1, 2023):

Opened a separate issue to discuss the "crowdedness" of the footer: https://github.com/actualbudget/actual/issues/1633

@MatissJanis commented on GitHub (Sep 1, 2023): Opened a separate issue to discuss the "crowdedness" of the footer: https://github.com/actualbudget/actual/issues/1633

GiteaMirror commented

2026-02-28 19:10:20 -06:00

@MatissJanis commented on GitHub (Sep 1, 2023):

One the root topic here:

Personally I think the footer should not be visible in the transaction entry page. Reason being: it's way too easy to mis-click on the bottom of the screen. Which in turn would mean losing all the inputs as the user is directed away from transaction entry.

But at the same time I'm not really a user for mobile-transaction entry, so take my opinion with a grain of salt :)

@MatissJanis commented on GitHub (Sep 1, 2023): One the root topic here: Personally I think the footer should not be visible in the transaction entry page. Reason being: it's way too easy to mis-click on the bottom of the screen. Which in turn would mean losing all the inputs as the user is directed away from transaction entry. But at the same time I'm not really a user for mobile-transaction entry, so take my opinion with a grain of salt :)

GiteaMirror commented

2026-02-28 19:10:20 -06:00

@shall0pass commented on GitHub (Sep 1, 2023):

I was under the mistaken impression that interactions like long press wouldn't be possible with a PWA, so that's cool.

Is there something we could do to the icon to indicate a second function? Maybe adding a + above the account icon. Secondary actions could have a different color or a shadow to distinguish it. For that to make sense though, we might want to think about other secondary actions that could be implemented. One offs don't really set a trend for discovery.
</Side topic>

If we're discussing the newly added transaction edit screen, I don't really think that the footer belongs, if we're talking about the account ledger screen, I'm leaning towards it belonging. But I still find it plenty usable as is. Usually after I'm done in the accounts view I head back to the budget, and the footer would remove one button press.

@shall0pass commented on GitHub (Sep 1, 2023): <Side topic> I was under the mistaken impression that interactions like long press wouldn't be possible with a PWA, so that's cool. Is there something we could do to the icon to indicate a second function? Maybe adding a + above the account icon. Secondary actions could have a different color or a shadow to distinguish it. For that to make sense though, we might want to think about other secondary actions that could be implemented. One offs don't really set a trend for discovery. </Side topic> If we're discussing the newly added transaction edit screen, I don't really think that the footer belongs, if we're talking about the account ledger screen, I'm leaning towards it belonging. But I still find it plenty usable as is. Usually after I'm done in the accounts view I head back to the budget, and the footer would remove one button press.