fix: text wrapping

Pearson-Higher-Ed · Jul 12, 2017 · 9975be2 · 9975be2
1 parent 4d85569
commit 9975be2
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/src/js/component-owner.js b/src/js/component-owner.js
@@ -87,13 +87,14 @@ class ComponentOwner extends Component {
     const chipStyle = appLevel ? {marginTop: this.state.chipVertPos} : {top: this.state.chipVertPos};
     const activeStyle = active === 'true' ? '' : ' pe-loadingIndicator-overlay-inactive';
     const childrenContent = children ? (<div aria-hidden={this.state.active} className={'loadingIndicatorContent-' + this.props.id}>{children}</div>) : this.convertToJSX(htmlString);
+    const chipTextWidth = data.text.chipText.length > 20 ? {width: 140} : {};
 
     return (
       <div className="pe-loadingIndicator">
         <div className={overlayStyle + activeStyle}>
           <div className="pe-loadingIndicator-chip" style={chipStyle}>
             <LoadingSpinner />
-            <div className="pe-loadingIndicator-chip-text">{data.text.chipText}</div>
+            <div className="pe-loadingIndicator-chip-text" style={chipTextWidth}>{data.text.chipText}</div>
           </div>
         </div>
         <div aria-live="polite" aria-busy={active}>