[Bug]: Rollover overspending indicators pushed off screen in mobile view

[matt-fidd]

Verified issue does not already exist?

• I have searched and found no existing issue

What happened?

As above, image below.

[dymanoid]

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

[youngcw]

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

[dymanoid]

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:

[youngcw]

@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.

[dymanoid]

Something like this?

[youngcw]

@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

[dymanoid]

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