Toolbar: better handle breakpoint styling

src/components/ColorInput/ColorInput.css

@@ -23,11 +23,10 @@
 input.color-input {
   position: relative;
   height: 100%;
-  width: 96%;
+  width: 100%;
   box-sizing: border-box;
   border: none;
   border-radius: 8px;
-  margin: 0 0 0 4px;
   padding: 0;
   cursor: pointer;
 }

src/components/SearchInput/SearchInput.css

@@ -3,7 +3,6 @@
   flex: 2;
   align-items: center;
   height: 48px;
-  margin: 0 4px;
   padding: 0 24px;
   border-radius: 8px;
   color: white;

src/components/SearchInput/SearchInput.tsx

@@ -31,7 +31,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
         type="text"
         autoComplete="off"
         value={value}
-        placeholder="Search for an icon"
+        placeholder="Search"
         onChange={({ currentTarget }) => setValue(currentTarget.value)}
       />
       {value ? (

src/components/SizeInput/SizeInput.css

@@ -4,7 +4,6 @@
   flex: 2;
   align-items: center;
   height: 48px;
-  margin: 0 4px;
   padding: 0 24px;
   color: white;
   border-radius: 8px;

src/components/StyleInput/StyleInput.css

@@ -19,7 +19,6 @@
   width: 176px !important;
   height: 48px !important;
   justify-content: flex-start;
-  margin: 0 4px;
   padding: 0 24px !important;
   color: white;
   border-radius: 8px !important;
@@ -28,6 +27,12 @@
   border: none !important;
 }
 
+@media screen and (max-width: 558px) {
+  .react-dropdown-select {
+    width: 100% !important;
+  }
+}
+
 .react-dropdown-select-content {
   display: flex;
   align-items: center;

src/components/Toolbar/Toolbar.css

@@ -14,9 +14,13 @@ menu.toolbar {
 .toolbar-contents {
   width: 83.33%;
   max-width: 1120px;
-  padding: 8px 0;
+  padding: 0 0 8px;
   display: flex;
   flex-flow: wrap;
   align-items: center;
   justify-content: space-between;
 }
+
+.toolbar-contents > * {
+  margin: 8px 4px 0;
+}