From 6f0ee82821253dbe281592f7e47c4a18f37e348a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 18 Oct 2021 21:57:28 +0100
Subject: [PATCH] :iphone: Responsive mobile-support for form elements

---
 src/components/FormElements/Input.vue  | 34 +++++++++++++++++---------
 src/components/FormElements/Select.vue | 13 ++++++++++
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/FormElements/Input.vue b/src/components/FormElements/Input.vue
index 1ddc9df8..3acafb1a 100644
--- a/src/components/FormElements/Input.vue
+++ b/src/components/FormElements/Input.vue
@@ -54,6 +54,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+
 div.input-container {
   margin: 0.25rem auto;
   display: flex;
@@ -62,18 +64,20 @@ div.input-container {
     flex-direction: column;
   }
   &.horizontal {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    label.input-label,
-    input.input-field,
-    p.input-description {
-      margin: 0.25rem;
-      flex-basis: 8rem;
-      flex-grow: 1;
+    @include tablet-up {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      label.input-label,
+      input.input-field,
+      p.input-description {
+        margin: 0.25rem;
+        flex-basis: 8rem;
+        flex-grow: 1;
+      }
+      input.input-field { flex-grow: 2; }
+      p.input-description { flex-grow: 3; }
     }
-    input.input-field { flex-grow: 2; }
-    p.input-description { flex-grow: 3; }
   }
 
   input.input-field {
@@ -99,6 +103,14 @@ div.input-container {
   p.input-description {
     opacity: var(--dimming-factor);
   }
+
+  @include tablet-down {
+    flex-direction: column;
+    align-items: start;
+    input.input-field {
+      margin: 0.5rem;
+    }
+  }
 }
 
 </style>
diff --git a/src/components/FormElements/Select.vue b/src/components/FormElements/Select.vue
index 3ad72aba..2c1410d8 100644
--- a/src/components/FormElements/Select.vue
+++ b/src/components/FormElements/Select.vue
@@ -43,6 +43,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+
 div.select-container {
   margin: 0.25rem auto;
   display: flex;
@@ -78,11 +80,22 @@ div.select-container {
       outline: none;
     }
   }
+  @include tablet-down {
+    flex-direction: column;
+    align-items: start;
+      label.select-label,
+      .form-dropdown,
+      p.select-description {
+        margin: 0.5rem;
+        flex-basis: auto;
+      }
+  }
 }
 </style>
 
 <style lang="scss">
 @import '@/styles/style-helpers.scss';
+
 .form-dropdown {
   margin: 1rem auto;
   ul.vs__dropdown-menu {