Adapted the UI for mobile (table incomplete)

3 files changed, 66 insertions, 23 deletions

diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index bef03dc..592f4ec 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -8,9 +8,9 @@
 
 @import "../../styles/theme";
 
-.ItemsDisplay,
-.ItemsDisplay table {
+.ItemsDisplay {
   width: 100%;
+  box-sizing: border-box;
 }
 
 .ItemsDisplay {
@@ -73,3 +73,10 @@
   font-size: 2rem;
   color: $foreground2;
 }
+
+@media only screen and (max-device-width: 480px) {
+  .SummaryDisplay {
+    width: auto;
+    min-height: 16rem;
+  }
+}
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 1ba5b85..393a2d3 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -103,10 +103,6 @@ input {
   width: 27rem;
 }
 
-.threePaneForm .smallPane {
-  width: 15rem;
-}
-
 .twoPaneForm label {
   @include formWideLabel();
 }
@@ -135,10 +131,49 @@ input {
   font-size: $fontSize2;
 }
 
-
-/* */
 .MetaInfoForm {
   width: 60%;
 }
 
-
+@media only screen and (max-device-width: 480px) {
+  .threePaneForm {
+    flex-direction: column;
+    height: 45rem;
+    margin: 3rem auto;
+  }
+
+  .threePaneForm .widePane,
+  .threePaneForm .smallPane {
+    width: 100%;
+  }
+
+  .threePaneForm label {
+    flex-wrap: wrap;
+  }
+
+  .twoPaneForm {
+    flex-direction: column;
+    height: 28rem;
+  }
+  
+  .twoPaneForm .widePane {
+    width: 100%;
+  }
+
+  .twoPaneForm label {
+    flex-wrap: wrap;
+  }
+
+  .wideInputBox, .selectInputBox {
+    width: 100%;
+  }
+  
+  .smallInputBox {
+    width: 5.5rem;
+  }
+
+  .MetaInfoForm {
+    width: 100%;
+    height: 15rem;
+  }
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 54cbddc..a1b84ef 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -21,11 +21,6 @@
   scrollbar-width: 1vw;  /* Firefox */
 }
 
-html, body {
-  height: 100%;
-  width: 100%;
-}
-
 body {
   background-color: $background1;
   color: $foreground1;
@@ -33,20 +28,21 @@ body {
 }
 
 * {
-  font-family: $defFont
+  font-family: $defFont;
 }
 
 .root-content {
   width: 95%;
   margin: auto;
   margin-bottom: 3rem;
+  max-width: 1920px;
 }
 
 .BillingPageFlex {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  height: 70vh;
+  height: 27rem;
 }
 
 .BillingPageFlex div {
@@ -66,12 +62,13 @@ body {
   position: absolute;
 
   width: 95%;
-  height: 70vh;
+  max-width: 1920px;
+  height: 32rem;
   box-sizing: border-box;
 
+  top: 0; bottom: 0;
   left: 0; right: 0;
-  margin: 0 auto;
-  top: 15vh;
+  margin: auto;
 
   background-color: $background3;
   box-shadow: $floatingShadow;
@@ -81,11 +78,15 @@ body {
 }
 
 
-/*
-idk if im going that way
 @media only screen and (max-device-width: 480px) {
-  .root-content {
+  .floatingMenu {
     width: 95%;
+    height: 80vh;
+  
+    padding: 0.5rem;
+  }
+  .BillingPageFlex {
+    flex-direction: column;
+    height: 35rem;
   }
 }
-*/