Fix layout and dom structure

src/components/SearchFiltersMobile/SearchFiltersMobile.css

@@ -65,7 +65,6 @@
 .modalHeadingWrapper {
   padding-bottom: 31px;
   border-bottom: 1px solid var(--matterColorNegative);
-  margin-bottom: 27px;
 }
 
 .modalHeading {
@@ -95,6 +94,12 @@
   }
 }
 
+.filtersWrapper {
+  /* add bottom margin so that the last filter won't be hidden
+   * under the bottom bar */
+  margin-bottom: 160px;
+}
+
 .showListingsContainer {
   position: fixed;
   bottom: 0;

src/components/SearchFiltersMobile/SearchFiltersMobile.js

@@ -211,8 +211,10 @@ class SearchFiltersMobileComponent extends Component {
               <FormattedMessage id={'SearchFiltersMobile.resetAll'} />
             </button>
           </div>
-          {categoryFilter}
-          {featuresFilter}
+          <div className={css.filtersWrapper}>
+            {categoryFilter}
+            {featuresFilter}
+          </div>
           <div className={css.showListingsContainer}>
             <Button className={css.showListingsButton} onClick={this.closeFilters}>
               {showListingsLabel}

src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.css

@@ -2,6 +2,7 @@
 
 .root {
   padding-bottom: 16px;
+  margin-top: 30px;
   border-bottom: 1px solid var(--matterColorNegative);
 }
 

src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobile.js

@@ -65,16 +65,15 @@ class SelectMultipleFilterMobileComponent extends Component {
             <FormattedMessage id={'SelectMultipleFilterMobileForm.clear'} />
           </button>
         </div>
-        <div className={optionsContainerClass}>
-          <SelectMultipleFilterMobileForm
-            name={name}
-            options={options}
-            initialValues={namedInitialValues}
-            onChange={this.handleSelect}
-            enableReinitialize={true}
-            keepDirtyOnReinitialize={true}
-          />
-        </div>
+        <SelectMultipleFilterMobileForm
+          className={optionsContainerClass}
+          name={name}
+          options={options}
+          initialValues={namedInitialValues}
+          onChange={this.handleSelect}
+          enableReinitialize={true}
+          keepDirtyOnReinitialize={true}
+        />
       </div>
     );
   }

src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.css

@@ -1,4 +0,0 @@
-@import '../../marketplace.css';
-
-.root {
-}

src/components/SelectMultipleFilterMobile/SelectMultipleFilterMobileForm.js

@@ -5,19 +5,22 @@ import { reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { FieldGroupCheckbox, Form } from '../../components';
 
 const SelectMultipleFilterMobileFormComponent = props => {
-  const { form, name, options } = props;
+  const { form, className, name, options } = props;
 
   return (
-    <Form>
+    <Form className={className}>
       <FieldGroupCheckbox name={name} id={`${form}.${name}`} options={options} />
     </Form>
   );
 };
 
-SelectMultipleFilterMobileFormComponent.defaultProps = {};
+SelectMultipleFilterMobileFormComponent.defaultProps = {
+  className: null,
+};
 
 SelectMultipleFilterMobileFormComponent.propTypes = {
   ...formPropTypes,
+  className: string,
   name: string.isRequired,
   options: arrayOf(
     shape({

src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.css

@@ -2,6 +2,7 @@
 
 .root {
   padding-bottom: 16px;
+  margin-top: 30px;
   border-bottom: 1px solid var(--matterColorNegative);
 }