Merge pull request #165 from lbryio/fix-clamp-js-firefox

Fix line clamping on Firefox

js/component/common.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import lbry from '../lbry.js';
-import $clamp from 'clamp-js';
+import $clamp from 'clamp-js-main';
 
 //component/icon.js
 export let Icon = React.createClass({
@@ -31,13 +31,17 @@ export let TruncatedText = React.createClass({
     }
   },
   componentDidMount: function() {
+    // Manually round up the line height, because clamp.js doesn't like fractional-pixel line heights.
+
+    // Need to work directly on the style object because setting the style prop doesn't update internal styles right away.
+    this.refs.span.style.lineHeight = Math.ceil(parseFloat(getComputedStyle(this.refs.span).lineHeight)) + 'px';
+
     $clamp(this.refs.span, {
       clamp: this.props.lines || this.props.height || 'auto',
     });
   },
   render: function() {
-    var text = this.props.children;
-    return <span ref="span">{text}</span>;
+    return <span ref="span" className="truncated-text">{this.props.children}</span>;
   }
 });
 

package.json

@@ -22,7 +22,7 @@
     "babel-cli": "^6.11.4",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
-    "clamp-js": "^0.7.0",
+    "clamp-js-main": "^0.11.1",
     "mediaelement": "^2.23.4",
     "node-sass": "^3.8.0",
     "react": "^15.4.0",

scss/_gui.scss

@@ -121,6 +121,10 @@ input[type="text"], input[type="search"]
   height: $spacing-vertical * 1.5;
 }
 
+.truncated-text {
+  display: inline-block;
+}
+
 .busy-indicator
 {
   background: url('../img/busy.gif') no-repeat center center;