Break words in panels to fit to space. Fixes #225.

nextstrain · Feb 27, 2017 · f098d19 · f098d19
1 parent dac2cdc
commit f098d19
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -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>