Fix search on mobile

src/styles/components/list-backgrounds.scss

@@ -47,7 +47,7 @@
         }
       }
 
-      @media screen and (max-width: ($tablet / 2)) {
+      @media screen and (max-width: ($mobile)) {
         width: calc(100% - 1em);
 
         &:nth-child(1n) {

src/styles/components/list.scss

@@ -126,4 +126,19 @@
   .filters input {
     font-size: .9em;
   }
+
+  @media screen and (max-width: $tablet) {
+    position: static;
+    margin: 1rem 0;
+    max-width: 100%;
+    min-width: auto;
+
+    .search {
+      width: 100%;
+
+      .control:first-child {
+        width: 100%;
+      }
+    }
+  }
 }

src/styles/components/namespaces.scss

@@ -4,7 +4,7 @@ $lists-per-row: 5;
   .button.new-namespace {
     float: right;
 
-    @media screen and (max-width: $tablet / 2) {
+    @media screen and (max-width: $mobile) {
       float: none;
       width: 100%;
       margin-bottom: 1rem;
@@ -84,7 +84,7 @@ $lists-per-row: 5;
           }
         }
 
-        @media screen and (max-width: $tablet / 2) {
+        @media screen and (max-width: $mobile) {
           $lists-per-row: 1;
           & {
             width: 100%;

src/styles/theme/theme.scss

@@ -1,5 +1,7 @@
 @import '../../../node_modules/bulma/bulma';
 
+@import 'variables-derived';
+
 *, *:hover, *:active, *:focus {
   outline: none;
 }

src/styles/theme/variables-derived.scss

@@ -0,0 +1,2 @@
+// Variables that are derived from bulma variables need to be included after them
+$mobile: $tablet / 2;