From e6f473e275e601f4aa3f1354f96864aa73959044 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 9 Feb 2017 18:29:22 -0500
Subject: [PATCH 1/3] Switch to maintained fork of clamp.js

---
 js/component/common.js | 2 +-
 package.json           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/component/common.js b/js/component/common.js
index fcb7fbd0d..f13e3ac56 100644
--- a/js/component/common.js
+++ b/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({
diff --git a/package.json b/package.json
index b36fac6f7..ff5a89af2 100644
--- a/package.json
+++ b/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",

From c8754e43511158379c449b7c0183fbd4d01a62ac Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 9 Feb 2017 19:01:34 -0500
Subject: [PATCH 2/3] Round up line heights in TruncatedText (workaround for
 Clamp.js bug)

Clamp.js doesn't handle fractional-pixel line heights reliably. It
always rounds down the line height when calculating the target height
for the element, and you end up with one less line than you asked for.
---
 js/component/common.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/js/component/common.js b/js/component/common.js
index f13e3ac56..afb110871 100644
--- a/js/component/common.js
+++ b/js/component/common.js
@@ -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>;
   }
 });
 

From bd922f0f4557697c0ebf3125d9c57cdb976e1378 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 9 Feb 2017 19:06:09 -0500
Subject: [PATCH 3/3] Make TruncatedText elements display: inline-block

Needed because clamp.js sets a height on browsers that don't have
native clamping.
---
 scss/_gui.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scss/_gui.scss b/scss/_gui.scss
index be4fefcbf..5757b4565 100644
--- a/scss/_gui.scss
+++ b/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;