From b081e020cd09ebc317b28a1937e6396e210fea46 Mon Sep 17 00:00:00 2001
From: David <david.sato64@gmail.com>
Date: Fri, 30 Oct 2020 13:20:36 +0100
Subject: [PATCH] add autoWidth prop to self adjust (#1560)

---
 src/components/layout/PageWrappers.tsx     | 4 +++-
 src/components/layout/SwapLayout/index.tsx | 2 --
 src/pages/Wallet.tsx                       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/PageWrappers.tsx b/src/components/layout/PageWrappers.tsx
index 3db847deb..2f16c8ab8 100644
--- a/src/components/layout/PageWrappers.tsx
+++ b/src/components/layout/PageWrappers.tsx
@@ -61,8 +61,10 @@ export const StandaloneCardWrapper = styled.div`
     }
   }
 `
-export const PageWrapper = styled.section`
+export const PageWrapper = styled.section<{ $autoWidth?: boolean }>`
   height: 75rem;
+  width: ${({ $autoWidth = false }): string => ($autoWidth ? 'auto' : '100%')};
+  margin: auto;
   max-width: 100%;
 
   background: var(--color-background-pageWrapper);
diff --git a/src/components/layout/SwapLayout/index.tsx b/src/components/layout/SwapLayout/index.tsx
index eab45cf8e..0841add6a 100644
--- a/src/components/layout/SwapLayout/index.tsx
+++ b/src/components/layout/SwapLayout/index.tsx
@@ -43,8 +43,6 @@ const Wrapper = styled.div`
     }
 
     > section {
-      width: 100%;
-
       @media ${MEDIA.mobile} {
         overflow: initial;
       }
diff --git a/src/pages/Wallet.tsx b/src/pages/Wallet.tsx
index 60e333287..80ed70f24 100644
--- a/src/pages/Wallet.tsx
+++ b/src/pages/Wallet.tsx
@@ -3,7 +3,7 @@ import { PageWrapper } from 'components/layout'
 import DepositWidget from 'components/DepositWidget'
 
 const Deposit: React.FC = () => (
-  <PageWrapper>
+  <PageWrapper $autoWidth>
     <DepositWidget />
   </PageWrapper>
 )