Fix: Select component styling

Fixes #217

Author: birdofpreyru

__tests__/shared/components/__snapshots__/Select.jsx.snap

@@ -4,9 +4,10 @@ exports[`Matches shallow shapshot 1`] = `
 <Select
   addLabelText="Add \\"{label}\\"?"
   arrowRenderer={[Function]}
-  autosize={true}
+  autosize={false}
   backspaceRemoves={true}
   backspaceToRemoveMessage="Press backspace to remove {label}"
+  className="src-shared-components-Select-___style__select___oXBnl"
   clearAllText="Clear all"
   clearRenderer={[Function]}
   clearValueText="Clear value"

src/shared/components/Select.jsx renamed to src/shared/components/Select/index.jsx

@@ -3,11 +3,17 @@ import PT from 'prop-types';
 
 import ReactSelect from 'react-select';
 import 'react-select/dist/react-select.css';
+import style from './style.scss';
 
 /* TODO: Do we really need the instanceId? */
 export default function Select(props) {
   return (
-    <ReactSelect {...props} instanceId={props.id} />
+    <ReactSelect
+      {...props}
+      autosize={false}
+      className={style.select}
+      instanceId={props.id}
+    />
   );
 }
 

src/shared/components/Select/style.scss

@@ -0,0 +1,12 @@
+.select {
+  :global {
+    input.Select-input {
+      margin-left: 0 !important;
+      padding-right: 6px !important;
+    }
+
+    .Select-multi-value-wrapper {
+      width: 100% !important;
+    }
+  }
+}

src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss

@@ -365,7 +365,6 @@ $panel-radius-4: $corner-radius * 2;
 
       input {
         font-size: 15px;
-        padding: 0;
       }
     }