From f854d8e165973835d6988976ba329001652b2673 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Sat, 22 Aug 2020 14:58:53 -0400
Subject: [PATCH] Toolbar: improve mobile breakpoint

---
 src/components/SearchInput/SearchInput.css | 16 +++++++++++++++-
 src/components/SizeInput/SizeInput.css     |  6 ++++++
 src/components/Toolbar/Toolbar.css         |  8 ++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css
index ba8f981..e5d41e4 100644
--- a/src/components/SearchInput/SearchInput.css
+++ b/src/components/SearchInput/SearchInput.css
@@ -45,5 +45,19 @@
 
 .wait-icon {
   cursor: wait;
-  /* opacity: 0.5; */
+}
+
+@media screen and (max-width: 558px) {
+  .search-bar svg {
+    display: none;
+  }
+
+  .search-bar input {
+    margin-left: 0;
+    width: 60%;
+  }
+
+  .wait-icon {
+    display: none;
+  }
 }
diff --git a/src/components/SizeInput/SizeInput.css b/src/components/SizeInput/SizeInput.css
index d47e2a5..1f156fd 100644
--- a/src/components/SizeInput/SizeInput.css
+++ b/src/components/SizeInput/SizeInput.css
@@ -27,6 +27,12 @@
   outline: none; /* Remove outline */
 }
 
+@media screen and (max-width: 558px) {
+  .size-bar input {
+    margin: 0 auto;
+  }
+}
+
 .size-bar input::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
diff --git a/src/components/Toolbar/Toolbar.css b/src/components/Toolbar/Toolbar.css
index b115718..83450b7 100644
--- a/src/components/Toolbar/Toolbar.css
+++ b/src/components/Toolbar/Toolbar.css
@@ -24,3 +24,11 @@ menu.toolbar {
 .toolbar-contents > * {
   margin: 8px 4px 0;
 }
+
+@media screen and (max-width: 558px) {
+  .toolbar-contents {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 50% 50%;
+  }
+}