Fix minor style issue with ovezrflowing text in the detail panel.

gnpis · Mar 17, 2017 · da76950 · da76950
1 parent 11922e1
commit da76950
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/js/DetailsPanel.js b/src/js/DetailsPanel.js
@@ -180,7 +180,7 @@ module.exports = function DetailsPanel(widget) {
   var $title = $('<h2>'+defaultTilte+'</h2>').appendTo($details);
 
   var $detailsTable = $('<table></table>');
-  $details.append($detailsTable);
+  $details.append($('<div>').append($detailsTable));
 
   // Add to widget
   widget.$root.append($details);

diff --git a/src/less/cropOntologyWidget.less b/src/less/cropOntologyWidget.less
@@ -43,6 +43,11 @@
     color: #333;
     border-bottom: 1px solid #DDD !important;
     padding-left: 10px;
+
+    /* These are technically the same, but use both */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
   }
 
   h3 {
@@ -99,10 +104,14 @@
 
   // Details (left panel)
   .details {
-    float: left;
+    float: right;
     width: 50%;
-    max-height: 600px;
-    overflow-y: auto;
+
+    & > div {
+      max-height: 554px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
 
     table {
       border: none;
@@ -139,9 +148,12 @@
       text-align: left;
       padding-left: 20px;
 
-      /* These are technically the same, but use both */
-      overflow-wrap: break-word;
-      word-wrap: break-word;
+      * {
+        /* These are technically the same, but use both */
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+      }
 
       a {
         display: inline-block;