From c29507c2e32d5a3fe25c6fe3dbfba9700f93316e Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Fri, 25 Jun 2021 20:36:09 +0530
Subject: Adapted the UI for mobile (table incomplete)

---
 src/components/Form/Form.scss | 49 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 7 deletions(-)

(limited to 'src/components/Form/Form.scss')

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;
+  }
+}
-- 
cgit v1.2.3