From 3b9b974ae72118d52df138319be4c38482ffeb6c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 8 Jun 2021 16:15:44 +0100
Subject: [PATCH] #19 - Settings container not visible in mobile

---
 src/components/Settings/SettingsContainer.vue | 9 ++++++++-
 src/styles/media-queries.scss                 | 7 +++++++
 src/views/Home.vue                            | 5 ++++-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 3effecdb..4169d5ea 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -136,6 +136,10 @@ export default {
     &.hide {
       display: none;
     }
+    @include very-tiny-phone {
+      flex-direction: column;
+      align-items: baseline;
+    }
   }
 
   .show-hide-container {
@@ -151,6 +155,9 @@ export default {
       width: 2rem;
       top: 0.5rem;
       right: 0.5rem;
+      @include phone {
+        top: -3rem !important;
+      }
     }
     button {
       width: 100%;
@@ -183,7 +190,7 @@ export default {
 
   @include phone {
     .options-container, .show-hide-button {
-      display: none;
+      // display: none;
     }
   }
 
diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss
index 00ffc47e..5775ee53 100644
--- a/src/styles/media-queries.scss
+++ b/src/styles/media-queries.scss
@@ -1,5 +1,6 @@
 
 /* Widths in px */
+$very-very-tiny: 400px;
 $tiny: 600px;
 $small: 780px;
 $medium: 1150px;
@@ -8,6 +9,12 @@ $extra-large: 2800px;
 
 /* Usage @include tablet { ... } */
 
+@mixin very-tiny-phone {
+  @media (max-width: #{$very-very-tiny - 1px}) {
+    @content;
+  }
+}
+
 @mixin phone {
   @media (max-width: #{$tiny - 1px}) {
     @content;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index dc4160ea..62b4ec4a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -272,8 +272,11 @@ export default {
     border-radius: var(--curve-factor);
 }
 
-.filter-container {
+section.filter-container {
   border-bottom: 1px solid var(--outline-color);
+  @include phone {
+    flex-direction: column;
+  }
 }
 
 </style>