diff --git a/src/components/SearchFilters/SearchFilters.css b/src/components/SearchFilters/SearchFilters.css
index 3185fb71..bc2b33ca 100644
--- a/src/components/SearchFilters/SearchFilters.css
+++ b/src/components/SearchFilters/SearchFilters.css
@@ -3,28 +3,7 @@
.root {
display: flex;
justify-content: space-between;
- height: 40px;
-}
-
-.searchResultSummary {
- @apply --marketplaceH4FontStyles;
- line-height: 20px;
- margin-top: 9px;
-
- display: none;
-
- @media (--viewportMedium) {
- display: block;
- }
-}
-
-.searchResultSummaryMobile {
- display: flex;
- justify-content: space-between;
-
background-color: var(--matterColorBright);
- width: 100vw;
- padding: 1px 24px 14px 24px;
/* sticky result summary in mobile */
position: sticky;
@@ -32,10 +11,28 @@
z-index: 9;
@media (--viewportMedium) {
- display: none;
+ position: unset;
+ top: unset;
+ z-index: unset;
}
}
+.searchResultSummary {
+ @apply --marketplaceH4FontStyles;
+ line-height: 20px;
+ margin-top: 9px;
+}
+
+.searchResultSummaryMobile {
+ @apply --marketplaceH3FontStyles;
+ margin-top: 8px;
+
+ display: flex;
+ justify-content: space-between;
+
+ background-color: var(--matterColorBright);
+}
+
.mapIcon {
/* Font */
@apply --marketplaceTinyFontStyles;
@@ -48,6 +45,6 @@
border-radius: 3px;
width: 72px;
height: 35px;
- margin-top: 23px;
padding: 9px 22px;
+ margin: 0;
}
diff --git a/src/components/SearchFilters/SearchFilters.js b/src/components/SearchFilters/SearchFilters.js
index 052042f4..4025131d 100644
--- a/src/components/SearchFilters/SearchFilters.js
+++ b/src/components/SearchFilters/SearchFilters.js
@@ -9,8 +9,11 @@ import { SelectSingleCustomAttribute } from '../../components';
import routeConfiguration from '../../routeConfiguration';
import { createResourceLocatorString } from '../../util/routes';
import config from '../../config';
+import { withViewport } from '../../util/contextHelpers';
import css from './SearchFilters.css';
+const MAX_MOBILE_SCREEN_WIDTH = 768;
+
const SearchFiltersComponent = props => {
const {
rootClassName,
@@ -20,9 +23,12 @@ const SearchFiltersComponent = props => {
resultsCount,
searchInProgress,
onMapIconClick,
+ viewport,
history,
} = props;
+ const isMobileLayout = viewport.width < MAX_MOBILE_SCREEN_WIDTH;
+
const loadingResults =