From 3248aca0415f7272cab76dfb865fc5c98c7b3bd9 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 17 Jun 2020 21:44:44 +0200
Subject: [PATCH] Fix search on mobile

---
 src/styles/components/list-backgrounds.scss |  2 +-
 src/styles/components/list.scss             | 15 +++++++++++++++
 src/styles/components/namespaces.scss       |  4 ++--
 src/styles/theme/theme.scss                 |  2 ++
 src/styles/theme/variables-derived.scss     |  2 ++
 5 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 src/styles/theme/variables-derived.scss

diff --git a/src/styles/components/list-backgrounds.scss b/src/styles/components/list-backgrounds.scss
index 10272c27..b7b68108 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 2becc126..2bbcb509 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 f5d90085..c4c14404 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 de8f1424..42bc56fe 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 00000000..df99a3d2
--- /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;