(fix) select style

src/assets/stylesheets/components/_FormHint.scss

@@ -5,7 +5,7 @@
     line-height: 1.38;
     margin: 0;
     padding-top: 12px;
-    word-break: break-word;
+    word-break: break-all;
 
     &#{ & }-core {
         a {

src/assets/stylesheets/components/_FormSelect.scss

@@ -1,10 +1,12 @@
-.frm-FormSelect {
-    @include form-element-base-style();
-    @include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
-    appearance: none;
-    background-image: url('#{ $base-images-path }/Base/select.png');
-    background-position: right 13px center;
-    background-repeat: no-repeat;
-    height: $input-height;
-    padding-right: 30px;
+.frm-FormSelect_Select {
+    select {
+        @include form-element-base-style();
+        @include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
+        appearance: none;
+        background-image: url('#{ $base-images-path }/Base/select.png');
+        background-position: right 13px center;
+        background-repeat: no-repeat;
+        height: $input-height;
+        padding-right: 30px;
+    }
 }

src/components/FormSelect/index.js

@@ -21,7 +21,15 @@ export const FormSelect = ({
       <label className="frm-FormSelect_Title" htmlFor={id}>
         {title}
       </label>
-      <Select.Creatable name={name} id={id} value={value} onChange={onChange} options={options} disabled={disabled} />
+      <Select.Creatable
+        className="frm-FormSelect_Select"
+        name={name}
+        id={id}
+        value={value}
+        onChange={onChange}
+        options={options}
+        disabled={disabled}
+      />
       {hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
     </div>
   )