Improve header styles.

[fairlighteth]

Summary

• Improves the header for responsive viewports. Twitter icon disabled for now.
• Fixes a UNI inherited style issue where header elements were reordered, causing no padding between vCOW button and other items.

Example below uses the longest worded chain and a large numeric balance, to account for worse case.

Screen.Recording.2022-01-28.at.10.56.50.mov

Note:

• Aware that for a certain viewport size the SWAP PROFILE menu items get overlapped. Leaving that for what it is now.

[github-actions]

• 🔭 GP Swap: CoW Protocol v2 Swap UI

[elena-zh]

Hey @biocom , something weird is happening: I do not see the changes on your video on my PR. Look:

1. 'Connect to a wallet' button is clued to the vCOW button in a tablet view
   
   The same is when connected:
   

Could you please check what is wrong here?

[fairlighteth]

@elena-zh Thank you for reviewing. Looks like I forgot to add that change! Now pushed a fix for it.

[anxolin]

Should the breaking point be earlier?
with the vcow balance theres a bit of overlap

[fairlighteth]

@anxolin Yes agreed. Now pushed a fix to start earlier (for medium) by just showing the CowSwap icon.

[elena-zh]

hey @biocom , great!
But I still can overlap by the network switcher the 'Profile' link on a certain screen resolution [960-1030] px:

But it is reported in #2148, case 2, so might be addressed later

[fairlighteth]

@elena-zh Yes, that's the item mentioned in "Notes" which I will not address in this PR.

[fairlighteth]

Addressed the pending item in #2376