diff --git a/src/components/templates/Search/filterPrice.module.css b/src/components/templates/Search/filterPrice.module.css index 948283de4..e305feb59 100644 --- a/src/components/templates/Search/filterPrice.module.css +++ b/src/components/templates/Search/filterPrice.module.css @@ -1,7 +1,12 @@ -/* .filterList { - display: inline-flex; - float: left; -} */ +.filterList, +div.filterList { + 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); -} diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx index 38274b412..19f24045c 100644 --- a/src/components/templates/Search/filterPrice.tsx +++ b/src/components/templates/Search/filterPrice.tsx @@ -107,51 +107,49 @@ export default function FilterPrice({ } return ( - <div> - <div className={styles.filterList}> - {priceFilterItems.map((e, index) => { - const isSelected = - e.value === priceType || priceSelections.includes(e.value) - const selectFilter = cx({ - [styles.selected]: isSelected, - [styles.filter]: true - }) - return ( - <Button - size="small" - style="text" - key={index} - className={selectFilter} - onClick={async () => { - handleSelectedFilter(isSelected, e.value) - }} - > - {e.display} - </Button> - ) - })} - {serviceFilterItems.map((e, index) => { - const isSelected = - e.value === serviceType || serviceSelections.includes(e.value) - const selectFilter = cx({ - [styles.selected]: isSelected, - [styles.filter]: true - }) - return ( - <Button - size="small" - style="text" - key={index} - className={selectFilter} - onClick={async () => { - handleSelectedFilter(isSelected, e.value) - }} - > - {e.display} - </Button> - ) - })} - </div> + <div className={styles.filterList}> + {priceFilterItems.map((e, index) => { + const isSelected = + e.value === priceType || priceSelections.includes(e.value) + const selectFilter = cx({ + [styles.selected]: isSelected, + [styles.filter]: true + }) + return ( + <Button + size="small" + style="text" + key={index} + className={selectFilter} + onClick={async () => { + handleSelectedFilter(isSelected, e.value) + }} + > + {e.display} + </Button> + ) + })} + {serviceFilterItems.map((e, index) => { + const isSelected = + e.value === serviceType || serviceSelections.includes(e.value) + const selectFilter = cx({ + [styles.selected]: isSelected, + [styles.filter]: true + }) + return ( + <Button + size="small" + style="text" + key={index} + className={selectFilter} + onClick={async () => { + handleSelectedFilter(isSelected, e.value) + }} + > + {e.display} + </Button> + ) + })} </div> ) } diff --git a/src/components/templates/Search/sort.module.css b/src/components/templates/Search/sort.module.css index dc72f57df..8b64fa684 100644 --- a/src/components/templates/Search/sort.module.css +++ b/src/components/templates/Search/sort.module.css @@ -1,11 +1,18 @@ .sortList { - align-self: flex-end; - padding: calc(var(--spacer) / 10); + padding: 0 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 {