fix: layout padding/margin & overflow (#5707)

* chore: fix

* chore: tweaks

src/components/Popups/index.tsx

@@ -9,14 +9,12 @@ import { AutoColumn } from '../Column'
 import ClaimPopup from './ClaimPopup'
 import PopupItem from './PopupItem'
 
-const MobilePopupWrapper = styled.div<{ height: string | number }>`
+const MobilePopupWrapper = styled.div`
   position: relative;
   max-width: 100%;
-  height: ${({ height }) => height};
-  margin: ${({ height }) => (height ? '0 auto;' : 0)};
-  margin-bottom: ${({ height }) => (height ? '20px' : 0)};
-
+  margin: 0 auto;
   display: none;
+
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     display: block;
     padding-top: 20px;
@@ -74,7 +72,8 @@ export default function Popups() {
           <PopupItem key={item.key} content={item.content} popKey={item.key} removeAfterMs={item.removeAfterMs} />
         ))}
       </FixedPopupColumn>
-      <MobilePopupWrapper height={activePopups?.length > 0 ? 'fit-content' : 0}>
+      {activePopups?.length > 0 && (
+        <MobilePopupWrapper>
           <MobilePopupInner>
             {activePopups // reverse so new items up front
               .slice(0)
@@ -84,6 +83,7 @@ export default function Popups() {
               ))}
           </MobilePopupInner>
         </MobilePopupWrapper>
+      )}
     </>
   )
 }

src/components/swap/styleds.tsx

@@ -12,7 +12,6 @@ export const PageWrapper = styled.div`
   padding: 68px 8px 0px;
   max-width: 480px;
   width: 100%;
-  height: 100vh;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
     padding-top: 48px;

src/pages/App.tsx

@@ -64,29 +64,18 @@ initializeAnalytics(ANALYTICS_DUMMY_KEY, OriginApplication.INTERFACE, {
   isProductionEnv: isProductionEnv(),
 })
 
-const AppWrapper = styled.div`
-  display: flex;
-  flex-flow: column;
-  align-items: flex-start;
-  height: 100%;
-`
-
 const BodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
-  padding: 72px 0px 0px 0px;
+  padding: ${({ theme }) => theme.navHeight}px 0px 5rem 0px;
   align-items: center;
   flex: 1;
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    padding: 52px 0px 16px 0px;
-  `};
 `
 
 const MobileBottomBar = styled.div`
   z-index: ${Z_INDEX.sticky};
-  position: sticky;
+  position: fixed;
   display: flex;
   bottom: 0;
   right: 0;
@@ -114,10 +103,6 @@ const HeaderWrapper = styled.div<{ transparent?: boolean }>`
   z-index: ${Z_INDEX.sticky};
 `
 
-const Marginer = styled.div`
-  margin-top: 5rem;
-`
-
 function getCurrentPageFromLocation(locationPathname: string): PageName | undefined {
   switch (true) {
     case locationPathname.startsWith('/swap'):
@@ -205,7 +190,6 @@ export default function App() {
     <ErrorBoundary>
       <DarkModeQueryParamReader />
       <ApeModeQueryParamReader />
-      <AppWrapper>
       <Trace page={currentPage}>
         <HeaderWrapper transparent={isHeaderTransparent}>
           <NavBar />
@@ -317,7 +301,6 @@ export default function App() {
               <Loader />
             )}
           </Suspense>
-            <Marginer />
         </BodyWrapper>
         <MobileBottomBar>
           <PageTabs />
@@ -326,7 +309,6 @@ export default function App() {
           </Box>
         </MobileBottomBar>
       </Trace>
-      </AppWrapper>
     </ErrorBoundary>
   )
 }

src/pages/Pool/index.tsx

@@ -165,7 +165,7 @@ function WrongNetworkCard() {
   const theme = useTheme()
 
   return (
-    <div style={{ height: '100vh' }}>
+    <>
       <PageWrapper>
         <AutoColumn gap="lg" justify="center">
           <AutoColumn gap="lg" style={{ width: '100%' }}>
@@ -189,7 +189,7 @@ function WrongNetworkCard() {
         </AutoColumn>
       </PageWrapper>
       <SwitchLocaleLink />
-    </div>
+    </>
   )
 }
 
@@ -263,7 +263,6 @@ export default function Pool() {
 
   return (
     <Trace page={PageName.POOL_PAGE} shouldLogImpression>
-      <div style={{ height: '100vh' }}>
       <PageWrapper>
         <AutoColumn gap="lg" justify="center">
           <AutoColumn gap="lg" style={{ width: '100%' }}>
@@ -342,7 +341,6 @@ export default function Pool() {
         </AutoColumn>
       </PageWrapper>
       <SwitchLocaleLink />
-      </div>
     </Trace>
   )
 }