styling & spacing

src/components/templates/Search/filterPrice.module.css

@@ -1,7 +1,12 @@
-/* .filterList {
+.filterList,
-  display: inline-flex;
+div.filterList {
-  float: left;
+  white-space: normal;
-} */
+  margin-bottom: 0;
+}
+
+.filter {
+  display: inline-block;
+}
 
 .filter,
 button.filter,
@@ -9,14 +14,14 @@ button.filter,
 .filter:active,
 .filter:focus {
   border: 1px solid var(--border-color);
-  text-transform: uppercase;
   border-radius: var(--border-radius);
   margin-right: calc(var(--spacer) / 6);
+  margin-bottom: calc(var(--spacer) / 6);
   color: var(--color-secondary);
   background: var(--background-body);
 
   /* the only thing not possible to overwrite button style="text" with more specifity of selectors, so sledgehammer */
-  padding: calc(var(--spacer) / 5) !important;
+  padding: calc(var(--spacer) / 6) !important;
 }
 
 .filter:hover,
@@ -37,7 +42,3 @@ button.filter,
   margin-left: calc(var(--spacer) / 6);
   color: var(--background-body);
 }
-
-.filterList:first-of-type{
-  margin-bottom: calc(var(--spacer) / 6);
-}

src/components/templates/Search/filterPrice.tsx

@@ -107,51 +107,49 @@ export default function FilterPrice({
   }
 
   return (
-    <div>
+    <div className={styles.filterList}>
-      <div className={styles.filterList}>
+      {priceFilterItems.map((e, index) => {
-        {priceFilterItems.map((e, index) => {
+        const isSelected =
-          const isSelected =
+          e.value === priceType || priceSelections.includes(e.value)
-            e.value === priceType || priceSelections.includes(e.value)
+        const selectFilter = cx({
-          const selectFilter = cx({
+          [styles.selected]: isSelected,
-            [styles.selected]: isSelected,
+          [styles.filter]: true
-            [styles.filter]: true
+        })
-          })
+        return (
-          return (
+          <Button
-            <Button
+            size="small"
-              size="small"
+            style="text"
-              style="text"
+            key={index}
-              key={index}
+            className={selectFilter}
-              className={selectFilter}
+            onClick={async () => {
-              onClick={async () => {
+              handleSelectedFilter(isSelected, e.value)
-                handleSelectedFilter(isSelected, e.value)
+            }}
-              }}
+          >
-            >
+            {e.display}
-              {e.display}
+          </Button>
-            </Button>
+        )
-          )
+      })}
-        })}
+      {serviceFilterItems.map((e, index) => {
-        {serviceFilterItems.map((e, index) => {
+        const isSelected =
-          const isSelected =
+          e.value === serviceType || serviceSelections.includes(e.value)
-            e.value === serviceType || serviceSelections.includes(e.value)
+        const selectFilter = cx({
-          const selectFilter = cx({
+          [styles.selected]: isSelected,
-            [styles.selected]: isSelected,
+          [styles.filter]: true
-            [styles.filter]: true
+        })
-          })
+        return (
-          return (
+          <Button
-            <Button
+            size="small"
-              size="small"
+            style="text"
-              style="text"
+            key={index}
-              key={index}
+            className={selectFilter}
-              className={selectFilter}
+            onClick={async () => {
-              onClick={async () => {
+              handleSelectedFilter(isSelected, e.value)
-                handleSelectedFilter(isSelected, e.value)
+            }}
-              }}
+          >
-            >
+            {e.display}
-              {e.display}
+          </Button>
-            </Button>
+        )
-          )
+      })}
-        })}
-      </div>
     </div>
   )
 }

src/components/templates/Search/sort.module.css

@@ -1,11 +1,18 @@
 .sortList {
-  align-self: flex-end;
+  padding: 0 calc(var(--spacer) / 10);
-  padding: calc(var(--spacer) / 10);
   display: flex;
   align-items: center;
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
   background: var(--background-body);
+  overflow-y: auto;
+}
+
+@media (min-width: 40rem) {
+  .sortList {
+    align-self: flex-end;
+    overflow-y: unset;
+  }
 }
 
 .sortLabel {
@@ -15,6 +22,7 @@
   margin-right: calc(var(--spacer) / 1.5);
   text-transform: uppercase;
   color: var(--color-secondary);
+  font-size: var(--font-size-small);
 }
 
 .sorted {