From d817b920b4af7d8577fe0961772cd461f1b55395 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 23 Dec 2015 10:20:56 +0100
Subject: [PATCH] Use class to add overflow ellipsis instead of directly
 styling component

---
 js/components/ascribe_detail/detail_property.js | 11 ++---------
 sass/main.scss                                  |  6 ++++++
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js
index 44eec06a..0191ffa9 100644
--- a/js/components/ascribe_detail/detail_property.js
+++ b/js/components/ascribe_detail/detail_property.js
@@ -35,27 +35,20 @@ const DetailProperty = React.createClass({
         const {
             children,
             className,
+            ellipsis,
             label,
             labelClassName,
             separator,
             valueClassName,
             value } = this.props;
 
-        const styles = this.props.ellipsis ? {
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        } : null;
-
         return (
             <div className={classNames('row ascribe-detail-property', className)}>
                 <div className="row-same-height">
                     <div className={labelClassName}>
                         {label} {separator}
                     </div>
-                    <div
-                        className={valueClassName}
-                        style={styles}>
+                    <div className={classNames(valueClassName, {'add-overflow-ellipsis': ellipsis})}>
                         {children || value}
                     </div>
                 </div>
diff --git a/sass/main.scss b/sass/main.scss
index 4d536b80..9ca2a07a 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -108,6 +108,12 @@ hr {
     color: $ascribe-dark-blue;
 }
 
+.add-overflow-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .ascribe-subheader {
     padding-bottom: 10px;
     margin-top: -10px;