From 66d848388fba7ad68d63deec5ec8174f5dde5ca5 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 12 Sep 2020 14:19:30 +0200
Subject: [PATCH] Adjust horizontal content padding (#3671)

* Adjust horizontal content padding

* Adjust

* Adjust
---
 packages/apps/src/Content/index.tsx             | 9 ++-------
 packages/apps/src/overlays/Base.tsx             | 9 ++++-----
 packages/react-components/src/FilterOverlay.tsx | 2 +-
 packages/react-components/src/HelpOverlay.tsx   | 2 +-
 packages/react-components/src/Status/index.tsx  | 4 ++--
 packages/react-components/src/Tabs/index.tsx    | 4 ++--
 6 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx
index 7a7fe32a76..1325ad6bd6 100644
--- a/packages/apps/src/Content/index.tsx
+++ b/packages/apps/src/Content/index.tsx
@@ -90,16 +90,11 @@ function Content ({ className }: Props): React.ReactElement<Props> {
 
 export default React.memo(styled(Content)`
   flex-grow: 1;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 0 2rem 1rem;
+  overflow: hidden auto;
+  padding: 0 1.5rem 1rem;
   position: relative;
   width: 100%;
 
-  @media(max-width: 768px) {
-    padding: 0 0.5rem;
-  }
-
   .connecting {
     padding: 3.5rem 0;
   }
diff --git a/packages/apps/src/overlays/Base.tsx b/packages/apps/src/overlays/Base.tsx
index 1f14006d42..09cb09da2b 100644
--- a/packages/apps/src/overlays/Base.tsx
+++ b/packages/apps/src/overlays/Base.tsx
@@ -47,15 +47,14 @@ function BaseOverlay ({ children, className = '', icon, type }: Props): React.Re
 
 export default React.memo(styled(BaseOverlay)`
   background: white;
-  border: 0 solid transparent;
-  border-bottom-left-radius: 0.25rem;
-  border-bottom-width: 1px;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
   border-left-width: 0.25rem;
   line-height: 1.5em;
   padding: 0 1rem;
   position: fixed;
-  right: 0;
-  top: 0;
+  right: 0.75rem;
+  top: 0.75rem;
   max-width: 55rem;
   z-index: 500;
 
diff --git a/packages/react-components/src/FilterOverlay.tsx b/packages/react-components/src/FilterOverlay.tsx
index c4f4c3e136..fedc1e1937 100644
--- a/packages/react-components/src/FilterOverlay.tsx
+++ b/packages/react-components/src/FilterOverlay.tsx
@@ -31,7 +31,7 @@ export default React.memo(styled(FilterOverlay)`
     display: flex;
     justify-content: flex-end;
     position: absolute;
-    right: 5rem;
+    right: 1.5rem;
     top: 0.525rem;
 
     > div {
diff --git a/packages/react-components/src/HelpOverlay.tsx b/packages/react-components/src/HelpOverlay.tsx
index c31b0e07d2..d91b58944e 100644
--- a/packages/react-components/src/HelpOverlay.tsx
+++ b/packages/react-components/src/HelpOverlay.tsx
@@ -46,7 +46,7 @@ export default React.memo(styled(HelpOverlay)`
   .help-button {
     cursor: pointer;
     font-size: 2rem;
-    padding: 1rem 2.5rem 0 0;
+    padding: 1rem 1.5rem 0 0;
   }
 
   > .help-button {
diff --git a/packages/react-components/src/Status/index.tsx b/packages/react-components/src/Status/index.tsx
index c46adf9169..3204d3f5cc 100644
--- a/packages/react-components/src/Status/index.tsx
+++ b/packages/react-components/src/Status/index.tsx
@@ -206,8 +206,8 @@ function Status ({ className = '' }: Props): React.ReactElement<Props> | null {
 export default React.memo(styled(Status)`
   display: inline-block;
   position: fixed;
-  right: 0.25rem;
-  top: 0.25rem;
+  right: 0.75rem;
+  top: 0.75rem;
   width: 23rem;
   z-index: 1001;
 
diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx
index df28600b78..ac66206712 100644
--- a/packages/react-components/src/Tabs/index.tsx
+++ b/packages/react-components/src/Tabs/index.tsx
@@ -63,9 +63,9 @@ export default React.memo(styled(Tabs)`
   background: #fff;
   border-bottom: 1px solid #eeecea;
   display: flex;
-  margin: 0 -3rem;
+  margin: 0 -1.5rem;
   overflow-x: scroll;
-  padding: 1.5rem 3rem 0;
+  padding: 1.5rem 1.5rem 0;
   text-align: left;
   z-index: 1;