[Bug]: Rollover overspending indicators pushed off screen in mobile view about actual HOT 7 CLOSED

After discussing on Discord, this what we decided to implement:

from actual.

Will be happy to work on this. Please also see my comment in #2774.

from actual.

I think that the a better solution would be to somehow integrate the arrow into the pill around the value. Maybe the pill should run up against the side of the screen and then the arrow can be inside the pill along with the amount

from actual.

Here are three possible solutions. Which one do you prefer?
I don't like the 3rd one where the dark value containers extend to the right to cover the carryover arrow.
I personally prefer the 1st one where the arrows are outside of the value containers, so basically the current design. But the 2nd one is also okay.
So what are your thoughts?
Variant 1:

Variant 2:

Variant 3:

from actual.

@dymanoid
option 1 would match desktop the most and is the most similar to existing. I wouldn't be against option 2 though if others liked that more.

With option 3 could the pill be squared against the side? So no rounded right side.
that might make it feel less inconsistent.

from actual.

Something like this?

from actual.

@dymanoid Yeah that was what I was thinking. It still seems a bit weird, but its an option. My hope is that we don't have to lose more space just to make it look good if possible. That extended pill could maybe do that and maybe different enough from the regular pill to not look wrong or missaligned

from actual.