Fix mobile search styling

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;
 }

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 = <FormattedMessage id="SearchFilters.loadingResults" />;
 
   const resultsFound = (
@@ -32,9 +38,7 @@ const SearchFiltersComponent = props => {
   const noResults = <FormattedMessage id="SearchFilters.noResults" />;
 
   const resultsFoundMobile = (
-    <h2>
-      <FormattedMessage id="SearchFilters.foundResults" values={{ count: resultsCount }} />
-    </h2>
+    <FormattedMessage id="SearchFilters.foundResults" values={{ count: resultsCount }} />
   );
 
   const classes = classNames(rootClassName || css.root, className);
@@ -63,7 +67,7 @@ const SearchFiltersComponent = props => {
     />
   ) : null;
 
-  return (
+  const desktopFilters = (
     <div className={classes}>
       <div className={css.filters}>{categoryFilter}</div>
 
@@ -72,19 +76,25 @@ const SearchFiltersComponent = props => {
         {listingsAreLoaded && resultsCount === 0 ? noResults : null}
         {searchInProgress ? loadingResults : null}
       </div>
+    </div>
+  );
 
+  const mobileFilters = (
+    <div className={classes}>
       <div className={css.searchResultSummaryMobile}>
-        <div>
-          {listingsAreLoaded && resultsCount > 0 ? resultsFoundMobile : null}
-          {listingsAreLoaded && resultsCount === 0 ? noResults : null}
-          {searchInProgress ? loadingResults : null}
-        </div>
-        <div className={css.mapIcon} onClick={onMapIconClick}>
-          <FormattedMessage id="SearchFilters.openMapView" className={css.mapIconText} />
-        </div>
+        {listingsAreLoaded && resultsCount > 0 ? resultsFoundMobile : null}
+        {listingsAreLoaded && resultsCount === 0 ? noResults : null}
+        {searchInProgress ? loadingResults : null}
+      </div>
+      <div className={css.mapIcon} onClick={onMapIconClick}>
+        <FormattedMessage id="SearchFilters.openMapView" className={css.mapIconText} />
       </div>
     </div>
   );
+
+  const filters = isMobileLayout ? mobileFilters : desktopFilters;
+
+  return filters;
 };
 
 const { object, string, bool, number, func, shape } = PropTypes;
@@ -105,12 +115,18 @@ SearchFiltersComponent.propTypes = {
   searchingInProgress: bool,
   onMapIconClick: func.isRequired,
 
+  // form withViewport
+  viewport: shape({
+    width: number.isRequired,
+    height: number.isRequired,
+  }).isRequired,
+
   // from withRouter
   history: shape({
     push: func.isRequired,
   }).isRequired,
 };
 
-const SearchFilters = withRouter(SearchFiltersComponent);
+const SearchFilters = withViewport(withRouter(SearchFiltersComponent));
 
 export default SearchFilters;

src/components/SelectSingleCustomAttribute/SelectSingleCustomAttribute.css

@@ -15,6 +15,7 @@
 
   padding: 0 16px 2px 16px;
   width: auto;
+  height: 40px;
   min-height: 0;
   border-radius: 4px;
 
@@ -34,6 +35,7 @@
 
   padding: 0 16px 2px 16px;
   width: auto;
+  height: 40px;
   min-height: 0;
   border-radius: 4px;
 }

src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap

@@ -20,7 +20,7 @@ exports[`SearchPageComponent matches snapshot 1`] = `
   <withRouter(Connect(TopbarContainerComponent)) />
   <div>
     <div>
-      <withRouter(SearchFiltersComponent)
+      <withViewport(withRouter(SearchFiltersComponent))
         listingsAreLoaded={true}
         onMapIconClick={[Function]}
         resultsCount={22}