Swap page layout

[alongoni]

Summary

Fixes #1276 and #1550

The layout has changed a bit. Some small resolutions now have less padding on top but the scroll not appear.
Before (on production with scroll):

After (on this PR without scroll):

To Test

1. <> Open the page Swap

[github-actions]

CLA Assistant Lite:
Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.

---

I have read the CLA Document and I hereby sign the CLA

---

_{You can retrigger the CLA Action by commenting recheckcla in this Pull Request}

[github-actions]

• 🔭 GP Swap: CoW Protocol v2 Swap UI

[elena-zh]

LGTM!

[fairlighteth]

Thanks for checking this. My comments:

1. I'd add a bit more margin between header and the container.
2. Please double check all the other (content) pages if this still looks right (incl. mobile).

[alfetopito]

Looks good to me, just make sure Michel's comments are accounted for and I think it's good to go

[alongoni]

Please @elena-zh can you test it again? Thanks!
cc @biocom

[elena-zh]

Changes LGTM.
The only difference I see in UI in comparison with Prod, is that there is a smaller margin between footer elements and the end of the content page in a tablet/mobile views

But again, we have #1550 issue on the board that is related to footer elements displaying, so the issue might be fixed there.

@alfetopito , @biocom , WDYT?

[alongoni]

hey @elena-zh Thanks. I can tackle #1550 issue in this PR.

[elena-zh]

@alongoni , looks much-much better.
The only issue I could mention is that the footer is displayed in a 'hovered' state when a screen resolution is less than 720 px. See the video: https://watch.screencastify.com/v/n5Gmhpbn6a4cS4X4tUgA

Can we fix it somehow?

[alongoni]

@alongoni , looks much-much better. The only issue I could mention is that the footer is displayed in a 'hovered' state when a screen resolution is less than 720 px. See the video: https://watch.screencastify.com/v/n5Gmhpbn6a4cS4X4tUgA

Can we fix it somehow?

Yes, I saw it. But I think this behavior is ok since in mobile we don't have a :hover state. So in mobile the text has by default the max contrast between the text color and the background. Maybe we can leave it as it is.

[elena-zh]

Approved then!