From 9b8a31474250b2e5aed15d350ab70f2031363343 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Wed, 2 Sep 2015 17:45:07 +0200
Subject: [PATCH] Trim long container names and labels in details

fixes #418
---
 client/app/scripts/components/node-details-table.js | 10 +++++++---
 client/app/scripts/components/node-details.js       |  8 +++++---
 client/app/styles/main.less                         |  7 +++++--
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/app/scripts/components/node-details-table.js b/client/app/scripts/components/node-details-table.js
index dd43a590c..baa8601da 100644
--- a/client/app/scripts/components/node-details-table.js
+++ b/client/app/scripts/components/node-details-table.js
@@ -14,11 +14,15 @@ const NodeDetailsTable = React.createClass({
         {this.props.rows.map(function(row) {
           return (
             <div className="node-details-table-row">
-              <div className="node-details-table-row-key">{row.key}</div>
+              <div className="node-details-table-row-key truncate" title={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 truncate">{row.value_major}</div>}
-              {!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor truncate">{row.value_minor}</div>}
+              {!isNumeric && <div className="node-details-table-row-value-major truncate" title={row.value_major}>
+                {row.value_major}
+              </div>}
+              {!isNumeric && row.value_minor && <div className="node-details-table-row-value-minor truncate" title={row.value_minor}>
+                {row.value_minor}
+              </div>}
             </div>
           );
         })}
diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 0696bd79e..cd1177d3e 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -28,7 +28,7 @@ const NodeDetails = React.createClass({
     return (
       <div className="node-details">
         <div className="node-details-header node-details-header-notavailable">
-          <h2 className="node-details-header-label truncate">
+          <h2 className="node-details-header-label">
             n/a
           </h2>
           <div className="node-details-header-label-minor truncate">
@@ -64,10 +64,12 @@ const NodeDetails = React.createClass({
     return (
       <div className="node-details">
         <div className="node-details-header" style={style}>
-          <h2 className="node-details-header-label truncate">
+          <h2 className="node-details-header-label truncate" title={details.label_major}>
             {details.label_major}
           </h2>
-          <div className="node-details-header-label-minor truncate">{details.label_minor}</div>
+          <div className="node-details-header-label-minor truncate" title={details.label_minor}>
+            {details.label_minor}
+          </div>
         </div>
 
         <div className="node-details-content">
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index 2dba6430f..20df646ba 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -310,13 +310,16 @@ body {
 
   &-table {
 
-    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 1em;
+    }
 
     &-title {
       text-transform: uppercase;
-      margin-bottom: 0;
+      margin-bottom: 0.25em;
       color: @text-secondary-color;
       font-size: 100%;
+      line-height: 125%;
     }
 
     &-row {