Default box-sizing to border-box everywhere

src/components/Menu/index.tsx

@@ -40,7 +40,6 @@ const StyledMenuButton = styled.button`
 const StyledMenu = styled.div`
   margin-left: 0.5rem;
   display: flex;
-  box-sizing: border-box;
   justify-content: center;
   align-items: center;
   position: relative;

src/components/NavigationTabs/index.tsx

@@ -51,11 +51,9 @@ const StyledNavLink = styled(NavLink).attrs({
   text-decoration: none;
   color: ${({ theme }) => theme.text3};
   font-size: 20px;
-  box-sizing: border-box;
 
   &.${activeClassName} {
     border-radius: 12px;
-    box-sizing: border-box;
     font-weight: 500;
     color: ${({ theme }) => theme.text1};
   }

src/components/Popups/index.tsx

@@ -32,7 +32,6 @@ const MobilePopupWrapper = styled.div<{ height: string | number }>`
 
 const MobilePopupInner = styled.div`
   height: 99%;
-  box-sizing: border-box;
   overflow-x: auto;
   overflow-y: hidden;
   display: flex;
@@ -59,7 +58,6 @@ const Popup = styled.div`
   display: inline-block;
   width: 100%;
   padding: 1em;
-  box-sizing: border-box;
   background-color: ${({ theme }) => theme.bg1};
   position: relative;
   border-radius: 10px;

src/components/SearchModal/index.tsx

@@ -78,7 +78,6 @@ const Input = styled.input`
   background: none;
   border: none;
   outline: none;
-  box-sizing: border-box;
   border-radius: 20px;
   color: ${({ theme }) => theme.text1};
   border-style: solid;

src/components/SlippageTabs/index.tsx

@@ -52,7 +52,6 @@ const Input = styled.input<{ active?: boolean }>`
   font-size: 12px;
   min-width: 20px;
   outline: none;
-  box-sizing: border-box;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;

src/components/TokenWarningCard/index.tsx

@@ -125,7 +125,6 @@ export default function TokenWarningCard({ token, ...rest }: TokenWarningCardPro
 const WarningContainer = styled.div`
   max-width: 420px;
   width: 100%;
-  box-sizing: border-box;
   padding: 1rem;
 `
 

src/components/Web3Status/index.tsx

@@ -45,7 +45,6 @@ const Web3StatusGeneric = styled(ButtonSecondary)`
   align-items: center;
   padding: 0.5rem;
   border-radius: 12px;
-  box-sizing: border-box;
   cursor: pointer;
   user-select: none;
   :focus {

src/pages/App.tsx

@@ -34,7 +34,6 @@ const BodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
   padding-top: 160px;
   align-items: center;
   flex: 1;

src/pages/AppBody.tsx

@@ -10,7 +10,6 @@ export const Body = styled.div`
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
     0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 30px;
-  box-sizing: border-box;
   padding: 1rem;
   position: relative;
   margin-bottom: 10rem;

src/theme/index.tsx

@@ -182,6 +182,10 @@ body {
   overflow: hidden;    
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body > div {
   height: 100%;
   overflow: auto;