diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css index b0a0a125aa..31cd12c100 100644 --- a/src/components/SearchFilters/SearchFilters.css +++ b/src/components/SearchFilters/SearchFilters.css @@ -2,8 +2,13 @@ .root { display: flex; - justify-content: space-between; + flex-direction: column; background-color: var(--matterColorBright); +} + +.filterWrapper { + display: flex; + justify-content: space-between; position: relative; } @@ -24,6 +29,8 @@ line-height: 20px; margin-top: 9px; margin-bottom: 11px; + margin-left: auto; + margin-right: 8px; /* parent uses flexbox: this defines minimum width for text "6 results" */ flex-basis: 55px; diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js index 4a262d2f90..d0478147b6 100644 --- a/src/components/SearchFilters/SearchFilters.js +++ b/src/components/SearchFilters/SearchFilters.js @@ -69,7 +69,7 @@ const SearchFiltersComponent = props => { } = props; const hasNoResult = listingsAreLoaded && resultsCount === 0; - const classes = classNames(rootClassName || css.root, { [css.longInfo]: hasNoResult }, className); + const classes = classNames(rootClassName || css.root, className); const keywordLabel = intl.formatMessage({ id: 'SearchFilters.keywordLabel', @@ -197,22 +197,23 @@ const SearchFiltersComponent = props => { return (