Small fixes and better mobile layout

src/components/Settings/SearchBar.vue

@@ -55,6 +55,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
   section {
     display: flex;
     align-items: center;
@@ -107,12 +109,19 @@ export default {
     }
   }
 
-  @media screen and (max-width: 600px) {
+  @include tablet {
+    form {
+      display: block;
+      text-align: center;
+    }
+  }
+  @include phone {
     form {
       flex: 1;
       border-radius: 0;
       text-align: center;
       padding: 0.25rem 0;
+      display: block;
     }
   }
 </style>

src/components/Settings/SettingsContainer.vue

@@ -65,6 +65,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
   section {
     display: flex;
     align-items: center;
@@ -87,9 +89,21 @@ export default {
     }
   }
 
-  @media screen and (max-width: 600px) {
+  @include tablet {
+    section {
+      display: block;
+      margin: 0 auto;
+      background: none;
+      .options-container {
+          justify-content: center;
+      }
+    }
+  }
+
+  @include phone {
     .options-container {
       display: none;
     }
   }
+
 </style>