Swap page layout (#2488)

# 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):
![image](https://user-images.githubusercontent.com/622217/155407501-f8b8778f-b962-46ec-b2d6-45354719ac7a.png)
![image](https://user-images.githubusercontent.com/622217/155407577-ce3dacf1-14f0-43a6-b452-dd6c6409e567.png)

After (on this PR without scroll):
![image](https://user-images.githubusercontent.com/622217/155407452-2fb96a92-a7f0-4a69-92ce-2ac79b11e4b5.png)
![image](https://user-images.githubusercontent.com/622217/155407640-00510b39-2190-4f50-8d6e-95cefd567599.png)

  # To Test

1. <<Step one>> Open the page [`Swap`](https://pr2488--gpswapui.review.gnosisdev.com/)

src/custom/components/Footer/index.tsx

@@ -18,12 +18,8 @@ const Wrapper = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
   justify-content: space-evenly;
-  margin: auto 96px 0 32px;
+  margin: auto 16px;
   width: 100%;
-
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    margin: 0 auto 65px;
-  `}
 `
 
 const FooterWrapper = styled.div`

src/custom/pages/App/index.tsx

@@ -43,11 +43,12 @@ export const Wrapper = styled(AppMod)``
 
 export const BodyWrapper = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   width: 100%;
-  padding-top: 120px;
+  padding-top: 10vh;
   align-items: center;
-  flex: 1;
+  justify-content: center;
+  flex: auto;
   overflow-y: auto;
   overflow-x: hidden;
   z-index: 1;