Adapted the UI for mobile (table incomplete)

2 files changed, 51 insertions, 9 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;
+  }
+}