diff --git a/src/styles/components/list-backgrounds.scss b/src/styles/components/list-backgrounds.scss
index 10272c279..b7b681088 100644
--- a/src/styles/components/list-backgrounds.scss
+++ b/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) {
diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index 2becc126a..2bbcb5094 100644
--- a/src/styles/components/list.scss
+++ b/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%;
+      }
+    }
+  }
 }
diff --git a/src/styles/components/namespaces.scss b/src/styles/components/namespaces.scss
index f5d900858..c4c14404f 100644
--- a/src/styles/components/namespaces.scss
+++ b/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%;
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index de8f14245..42bc56fe1 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -1,5 +1,7 @@
 @import '../../../node_modules/bulma/bulma';
 
+@import 'variables-derived';
+
 *, *:hover, *:active, *:focus {
   outline: none;
 }
diff --git a/src/styles/theme/variables-derived.scss b/src/styles/theme/variables-derived.scss
new file mode 100644
index 000000000..df99a3d25
--- /dev/null
+++ b/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;