#19 - Settings container not visible in mobile

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;
     }
   }
 

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;

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>