From 2720b17ab1fb464852197442b50a949c2fcb73d0 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Fri, 29 May 2015 15:05:07 +0200
Subject: [PATCH] position tools absolute, extract truncate class

fixes #124
---
 client/app/scripts/components/details.js      |  6 +++--
 .../scripts/components/node-details-table.js  |  4 ++--
 client/app/scripts/components/node-details.js |  4 ++--
 client/app/styles/main.less                   | 23 ++++++++++++++-----
 4 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/client/app/scripts/components/details.js b/client/app/scripts/components/details.js
index e22b815a26..24e9553dac 100644
--- a/client/app/scripts/components/details.js
+++ b/client/app/scripts/components/details.js
@@ -11,8 +11,10 @@ const Details = React.createClass({
     return (
       <div id="details">
         <Paper zDepth={3}>
-          <div className="details-tools">
-            <span className="fa fa-close" onClick={this.handleClickClose} />
+          <div className="details-tools-wrapper">
+            <div className="details-tools">
+              <span className="fa fa-close" onClick={this.handleClickClose} />
+            </div>
           </div>
           <NodeDetails details={this.props.details} />
         </Paper>
diff --git a/client/app/scripts/components/node-details-table.js b/client/app/scripts/components/node-details-table.js
index 7363cf8cb3..dd43a590c4 100644
--- a/client/app/scripts/components/node-details-table.js
+++ b/client/app/scripts/components/node-details-table.js
@@ -17,8 +17,8 @@ const NodeDetailsTable = React.createClass({
               <div className="node-details-table-row-key">{row.key}</div>
               {isNumeric && <div className="node-details-table-row-value-scalar">{row.value_major}</div>}
               {isNumeric && <div className="node-details-table-row-value-unit">{row.value_minor}</div>}
-              {!isNumeric && <div className="node-details-table-row-value-major">{row.value_major}</div>}
-              {!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor">{row.value_minor}</div>}
+              {!isNumeric && <div className="node-details-table-row-value-major truncate">{row.value_major}</div>}
+              {!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor truncate">{row.value_minor}</div>}
             </div>
           );
         })}
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 0f49fbe53e..36dc8152ff 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -23,10 +23,10 @@ const NodeDetails = React.createClass({
     return (
       <div className="node-details">
         <div className="node-details-header" style={style}>
-          <h2 className="node-details-header-label">
+          <h2 className="node-details-header-label truncate">
             {node.label_major}
           </h2>
-          <div className="node-details-header-label-minor">{node.label_minor}</div>
+          <div className="node-details-header-label-minor truncate">{node.label_minor}</div>
         </div>
 
         <div className="node-details-content">
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 1e46251c25..eb2c193e26 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -31,6 +31,12 @@ html, body {
 .wrap {
 }
 
+/* add this class to truncate text with ellipsis, container needs width */
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 /* Space out content a bit */
 body {
@@ -185,11 +191,16 @@ body {
   right: 36px;
   top: 24px;
   bottom: 48px;
-  width: 32em;
+  width: 420px;
+
+  .details-tools-wrapper {
+    position: relative;
+  }
 
   .details-tools {
-    float: right;
-    padding: 16px 24px;
+    position: absolute;
+    top: 16px;
+    right: 24px;
     color: @white;
 
     span {
@@ -217,8 +228,10 @@ body {
     &-label {
       color: white;
       margin-bottom: 0;
+      width: 348px;
 
       &-minor {
+        width: 348px;
         font-size: 120%;
         color: @white;
       }
@@ -251,14 +264,12 @@ body {
       clear: left;
 
       &-key {
-        width: 9em;
+        width: 11em;
         float: left;
       }
 
       &-value-major {
         margin-right: 0.5em;
-        overflow: hidden;
-        text-overflow: ellipsis;
       }
 
       &-value-scalar {