FIX Search box css for compact size

client/src/components/Search/SearchBox.js

@@ -29,6 +29,7 @@ class SearchBox extends Component {
     this.getComponentWidth = this.getComponentWidth.bind(this);
     this.calculateSpaceForTags = this.calculateSpaceForTags.bind(this);
     this.calculateInputLeftPadding = this.calculateInputLeftPadding.bind(this);
+    this.calculateInputRightPadding = this.calculateInputRightPadding.bind(this);
     this.onTagListResize = this.onTagListResize.bind(this);
     this.focusOnLastTag = this.focusOnLastTag.bind(this);
     this.focusOnInput = this.focusOnInput.bind(this);
@@ -90,6 +91,10 @@ class SearchBox extends Component {
     return this.state.tagWidth + existingPadding;
   }
 
+  calculateInputRightPadding() {
+    return this.state.width < 576 ? 121 : 264;
+  }
+
   /**
    * Calculate the max-width available for tags.
    */
@@ -191,7 +196,10 @@ class SearchBox extends Component {
    */
   renderInput() {
     const { id, searchText, onChange, placeholder, name, borders } = this.props;
-    const style = { paddingLeft: `${this.calculateInputLeftPadding()}px` };
+    const style = {
+      paddingLeft: `${this.calculateInputLeftPadding()}px`,
+      paddingRight: `${this.calculateInputRightPadding()}px`
+    };
 
     const mergedBorders = Object.assign({}, SearchBox.defaultProps.borders, borders);
     const classe = 'search-box__content-field';
@@ -268,6 +276,7 @@ class SearchBox extends Component {
         'btn--icon',
         'font-icon-caret-down-two',
         'search-box__filter-trigger',
+        this.state.width < 576 ? 'search-box--no-label' : '',
         { collapsed: !expanded }
     );
     return (<Button

client/src/components/Search/SearchBox.scss

@@ -102,6 +102,13 @@ $search-box-height: 53px;
   &.collapsed::before {
     transform: rotate(0deg) translateY(0);
   }
+
+  &.search-box--no-label {
+    font-size: 0;
+    margin-right: 9px;
+    margin-top: 13px;
+    padding-right: 5px;
+  }
 }
 
 .search-box__hideable .search-form {