Toolbar: improve mobile breakpoint

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;
+  }
 }

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;

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%;
+  }
+}