From f098d19f7310e3ed98d3d6fafaf13e84ad86e4f6 Mon Sep 17 00:00:00 2001
From: Trevor Bedford <trevor@bedford.io>
Date: Sun, 26 Feb 2017 23:10:07 -0500
Subject: [PATCH] Break words in panels to fit to space. Fixes #225.

---
 src/components/tree/infoPanel.js        | 1 +
 src/components/tree/tipSelectedPanel.js | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/tree/infoPanel.js b/src/components/tree/infoPanel.js
index 98093540d..e09279ee0 100644
--- a/src/components/tree/infoPanel.js
+++ b/src/components/tree/infoPanel.js
@@ -48,6 +48,7 @@ const InfoPanel = ({tree, hovered, responsive, viewer}) => {
       color: infoPanelStyles.panel.color,
       backgroundColor: infoPanelStyles.panel.backgroundColor,
       wordWrap: "break-word",
+      wordBreak: "break-word"
     }
   };
   if (pos.x<viewerState.viewerWidth*0.7){
diff --git a/src/components/tree/tipSelectedPanel.js b/src/components/tree/tipSelectedPanel.js
index 7e084f970..8c0bafcde 100644
--- a/src/components/tree/tipSelectedPanel.js
+++ b/src/components/tree/tipSelectedPanel.js
@@ -20,7 +20,9 @@ const TipSelectedPanel = ({tip, goAwayCallback}) => {
       /* FLEXBOX */
       display: "flex",
       justifyContent: "center",
-      alignItems: "center"
+      alignItems: "center",
+      wordWrap: "break-word",
+      wordBreak: "break-word"
     }
   };
 
@@ -35,7 +37,7 @@ const TipSelectedPanel = ({tip, goAwayCallback}) => {
           <table>
             <tbody>
               <tr>
-                <th>Region</th>
+                <th width={130}>Region</th>
                 <td>{prettyString(tip.n.attr.region)}</td>
               </tr>
               <tr>