Tweak mobile UI/UX

BrunoBernardino · Jan 4, 2022 · 157f925 · 157f925
1 parent 31c2c9c
commit 157f925
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/components/Panels/AddExpense.tsx b/components/Panels/AddExpense.tsx
@@ -18,13 +18,14 @@ const Container = styled.section`
   flex: 1;
   background-color: ${colors().background};
   padding: 0 16px;
-  width: 90vw;
+  width: 86vw;
   border-radius: 5px;
-  margin-top: -10px;
-  margin-right: -2px;
+  margin: 10px 0 30px;
 
   @media only screen and (min-width: 800px) {
     max-width: 280px;
+    margin-top: 5px;
+    margin-bottom: 10px;
   }
 `;
 

diff --git a/components/Panels/Budgets.tsx b/components/Panels/Budgets.tsx
@@ -27,14 +27,15 @@ const Container = styled.section`
   display: flex;
   flex-direction: column;
   flex: 1;
-  margin: 0 10px;
+  margin: 20px 10px;
   max-height: 80vh;
   overflow: auto;
   ${safariFix}
   width: 90vw;
 
   @media only screen and (min-width: 800px) {
     width: auto;
+    margin: 0 10px;
   }
 `;
 

diff --git a/components/Panels/Expenses.tsx b/components/Panels/Expenses.tsx
@@ -23,13 +23,15 @@ const Container = styled.section`
   display: flex;
   flex-direction: column;
   flex: 1;
+  margin: 20px 10px;
   max-height: 80vh;
   overflow: auto;
   ${safariFix}
   width: 90vw;
 
   @media only screen and (min-width: 800px) {
     width: auto;
+    margin: 0;
   }
 `;