Improve responsiveness of header elements.

[fairlighteth]

Summary

• This PR tries to solve for some items in [1.10] Mobile: issues with the header buttons #2148
• The way it does that, is to enforce a max balance size, for both the vCOW and the network token balance (ETH, xDAI, etc.). It will use text ellipsis when the element is > 100px width on tablet/medium resolutions.
• This fix will not resolve it 100% but will do so in more scenarios. In the example below I used an extreme scenario (long network name, large vCOW balance, large xDAI balance). As you see, for a very short moment only it is still overlapping.

Screen.Recording.2022-02-02.at.14.37.00.mov

Todo

• Ways to improve: On medium/small resolutions, we could show abbreviated / shorter network names. Specifically Gnosis Chain -> GC.

[github-actions]

• 🔭 GP Swap: CoW Protocol v2 Swap UI

[elena-zh]

Hey @biocom , great job!
I noticed that in a certain screen width(960-1280 px) 'Profile' and 'Swap actions disappear from the header and do not appear in the menu

Could you please take a look at this issue?

[elena-zh]

Also, in this PR I see 'cropped' vCOW balance in the menu in iOS and Android devices

Compare it with Stage:

[alfetopito]

No comments on my side. You might want to consider Elena's

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[fairlighteth]

@elena-zh Addressed the comments:

[elena-zh]

Hey @biocom , thank you!
The 1st issue is fixed.
regarding to the 2nd one, a full amount is visible now, but it would be great to make it center-aligned. WDYT?

[fairlighteth]

@elena-zh I forgot to reset the 'max-width'. Which caused this issue. Should be fixed now.

[elena-zh]

LGTM now.
Thanks!