Prevent all parameters overflow

client/components/all-parameters.js

@@ -3,6 +3,7 @@
 import m from "mithril";
 import * as components from "../components";
 import * as taskQueue from "../task-queue";
+import longTextComponent from "../long-text-component";
 
 function escapeRegExp(str) {
   return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
@@ -101,7 +102,12 @@ const component = {
           )
         );
 
-        return m("tr", attrs, m("td.left", k), m("td.right", val));
+        return m(
+          "tr",
+          attrs,
+          m("td.left", m(longTextComponent, { text: k })),
+          m("td.right", val)
+        );
       });
 
     return m(

client/components/parameter.js

@@ -6,6 +6,7 @@ import * as store from "../store";
 import * as expression from "../../common/expression";
 import memoize from "../../common/memoize";
 import timeAgo from "../timeago";
+import longTextComponent from "../long-text-component";
 
 const memoizedParse = memoize(expression.parse);
 
@@ -69,9 +70,12 @@ const component = {
       );
     }
 
-    const el = m(
+    const el = m(longTextComponent, { text: value });
-      "span.parameter-value",
+
+    return m(
+      "span",
       {
+        class: "parameter-value",
         onmouseover: e => {
           e.redraw = false;
           // Don't update any child element
@@ -82,11 +86,9 @@ const component = {
           }
         }
       },
-      value,
+      el,
       edit
     );
-
-    return el;
   }
 };
 

client/css/app.css

@@ -538,10 +538,13 @@ span.na {
 
     & > table {
       width: 100%;
+      table-layout: fixed;
       border-spacing: 0;
       & > tbody {
         & > tr {
           & > td {
+            overflow: hidden;
+            white-space: nowrap;
             border-bottom: 1px dotted var(--color1);
           }
           transition: background-color var(--fade);
@@ -550,6 +553,9 @@ span.na {
           }
 
           & > td.left {
+            & > * {
+              max-width: 100%;
+            }
           }
           & > td.right {
             text-align: right;
@@ -644,6 +650,9 @@ span.long-text {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 400px;
+}
+
+span.long-text-overflowed {
   cursor: pointer;
   &:hover {
     text-decoration: underline;

client/long-text-component.js

@@ -8,25 +8,45 @@ const component = {
     const text = vnode.attrs.text;
     const element = vnode.attrs.element || "span";
 
+    function overflowed(_vnode) {
+      if (_vnode.dom.classList.contains("long-text-overflowed")) return;
+      _vnode.dom.classList.add("long-text-overflowed");
+      _vnode.dom.onclick = e => {
+        overlay.open(() => {
+          return m("textarea.long-text", {
+            value: text,
+            cols: 80,
+            rows: 24,
+            readonly: "",
+            oncreate: vnode2 => {
+              vnode2.dom.focus();
+              vnode2.dom.select();
+            }
+          });
+        });
+        // prevent index page selection
+        e.stopPropagation();
+        m.redraw();
+      };
+    }
+
     return m(
       element,
       {
+        oncreate: vnode2 => {
+          if (vnode2.dom.clientWidth !== vnode2.dom.scrollWidth)
+            overflowed(vnode2);
+        },
+        onupdate: vnode2 => {
+          if (vnode2.dom.clientWidth === vnode2.dom.scrollWidth) {
+            vnode2.dom.classList.remove("long-text-overflowed");
+            vnode2.dom.onclick = null;
+          } else {
+            overflowed(vnode2);
+          }
+        },
         class: "long-text",
-        title: text,
+        title: text
-        onclick: () => {
-          overlay.open(() => {
-            return m("textarea.long-text", {
-              value: text,
-              cols: 80,
-              rows: 24,
-              readonly: "",
-              oncreate: vnode2 => {
-                vnode2.dom.focus();
-                vnode2.dom.select();
-              }
-            });
-          });
-        }
       },
       text
     );