Add forced line wrap for category select

src/forms/select-styles.js

@@ -46,12 +46,15 @@ const customStyles = {
     position: 'relative',
     top: 10,
   }),
-  option: (provided, { isFocused, isSelected, isMulti }) => ({
+  option: (provided, {
+    isFocused, isSelected, isMulti, breakAll,
+  }) => ({
     ...provided,
     'background-color': isSelected ? '#0088ce' : isFocused ? '#def3ff' : '#ffffff', // eslint-disable-line no-nested-ternary
     'border-color': isSelected ? '#0088ce' : isFocused ? '#bee1f4' : 'transparent', // eslint-disable-line no-nested-ternary
     'border-style': 'solid',
     'border-width': '1px 0',
+    'word-break': breakAll ? 'break-all' : 'break-word',
     color: isSelected ? '#fff' : isFocused ? '#4d5258' : provided.color, // eslint-disable-line no-nested-ternary
     padding: '1px 10px',
     fontWeight: '400',

src/tagging/components/InnerComponents/TagSelector.js

@@ -48,6 +48,7 @@ class TagSelector extends React.Component {
       <Select
         id="tag_cat"
         value={val}
+        breakAll
         className="final-form-select"
         optionClassName="selected-option final-form-select-option"
         styles={customStyles}

src/tagging/tests/__snapshots__/tag.selector.test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`Tagging modifier match snapshot 1`] = `
 <StateManager
+  breakAll={true}
   className="final-form-select"
   classNamePrefix="react-select"
   clearable={false}