From bfd633fe854a2f5a9a0bc30f41cfd88b850f5d8e Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Wed, 18 Nov 2015 13:00:28 +0100
Subject: [PATCH] Fix render issues in Safari

* remove text shadow on node labels (left artifacts on zoom)
* wrap details header to avoid background color using padding

Fixes #439
---
 client/app/scripts/components/node-details.js | 24 +++++++++++--------
 client/app/styles/main.less                   |  5 ++--
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/client/app/scripts/components/node-details.js b/client/app/scripts/components/node-details.js
index 6222b3d074..35e1773cb5 100644
--- a/client/app/scripts/components/node-details.js
+++ b/client/app/scripts/components/node-details.js
@@ -30,11 +30,13 @@ const NodeDetails = React.createClass({
     return (
       <div className="node-details">
         <div className="node-details-header node-details-header-notavailable">
-          <h2 className="node-details-header-label">
-            n/a
-          </h2>
-          <div className="node-details-header-label-minor truncate">
-            {this.props.nodeId}
+          <div className="node-details-header-wrapper">
+            <h2 className="node-details-header-label">
+              n/a
+            </h2>
+            <div className="node-details-header-label-minor truncate">
+              {this.props.nodeId}
+            </div>
           </div>
         </div>
         <div className="node-details-content">
@@ -72,11 +74,13 @@ const NodeDetails = React.createClass({
     return (
       <div className="node-details">
         <div className="node-details-header" style={styles.header}>
-          <h2 className="node-details-header-label truncate" title={details.label_major}>
-            {details.label_major}
-          </h2>
-          <div className="node-details-header-label-minor truncate" title={details.label_minor}>
-            {details.label_minor}
+          <div className="node-details-header-wrapper">
+            <h2 className="node-details-header-label truncate" title={details.label_major}>
+              {details.label_major}
+            </h2>
+            <div className="node-details-header-label-minor truncate" title={details.label_minor}>
+              {details.label_minor}
+            </div>
           </div>
         </div>
 
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index c76ab20342..3ddb0b9f04 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -219,7 +219,6 @@ h2 {
   text {
     font-family: Roboto;
     fill: @text-secondary-color;
-    text-shadow: 0 2px 0 @white, 2px 0 0 @white, 0 -2px 0 @white, -2px 0 0 @white;
 
     &.node-label {
       fill: @text-color;
@@ -354,7 +353,9 @@ h2 {
 
   &-header {
 
-    padding: 36px 36px 16px 36px;
+    &-wrapper {
+      padding: 36px 36px 16px 36px;
+    }
 
     &-row {
       display: flex;