fix #6252 ([mobile UX] Eur symbol displayed below the price of the item)

[andrewpbrett]

What? Why?

Closes #6252

The formatting string for the currency display put an extra space in between the amount and the currency symbol, which resulted in it wrapping onto a second line.

What should we test?

See the issue; you can change the instance config to put the currency symbol after the amount and a price with four digits should remain all on one line.

Release notes

Fixed a visual bug where the price for an item would split across two lines on mobile devices.

Changelog Category: User facing changes

Dependencies

Documentation updates

[filipefurtad0]

Hey @andrewpbrett ,

I checked this bug again in staging. I've set different price "lengths" in order to mimic other weaker currencies.

• On mobile (Android), it looks like this:

Chrome

Firefox

• Turns out, this bug is observable as well in desktop as well. If one inserts an item into the cart, a second row is shown, see below:

I took a series of pics, for different screen sizes - see top right corner of the pic (Firefox 82, Ubuntu 20.04):

I staged this PR, but somehow can't quite observe any changes:

Chrome

Firefox

This video shows the behavior after staging this PR. Below is Firefox 82, and below Chrome 86:

Perhaps this PR could still be improved and extended to other number sizes? Happy to get feedback Andy, in case there is a testcase I'm missing 👍

[Matt-Yorkley]

Maybe we would be better off solving this with CSS? I think there's a few ways to control line-wrapping behavior with CSS rules.

[filipefurtad0]

Thanks for feedback on this one @Matt-Yorkley ,
Moving back to In Dev for now 👍

[sauloperez]

I could take a look myself once I'm done with #6366. You guys are pretty busy with many other things and I think this fits in my rather limited OFN hours per week.

[andrewpbrett]

I took another look and found a quick solution - sorry @sauloperez :)

I tested on my iPhone SE (the original, so 4" screen) and it looks like this should work for up to about 7 digits (depending slightly on what those digits are). Anything larger than that can accommodate even more digits before running over into the add to cart button.

[RachL]

@andrewpbrett FYI we are using browserstack to test on various devices and OS: you should have access to the credentials in bitwarden, let me know if it does not work 👍 1:

[filipefurtad0]

Hey @andrewpbrett ,

checked the following devices, after staging this PR:

Android 10 Samsung S10, Chrome

Android 10 Samsung S20, Firefox

IOS 14 IPhone 12 - Safari

Desktop Ubuntu 20.04 - Firefox 83 (responsiveness, identical to Chrome 86)

I also did some regression tests, by setting the Euro sign before the price. Interestingly, I couldn't set the Euro symbol, to appear before the price on mobile - worked in desktop though and it looked good as well. Ready to go!