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(
-      "span.parameter-value",
+    const el = m(longTextComponent, { text: 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,12 +8,10 @@ const component = {
     const text = vnode.attrs.text;
     const element = vnode.attrs.element || "span";
 
-    return m(
-      element,
-      {
-        class: "long-text",
-        title: text,
-        onclick: () => {
+    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,
@@ -26,7 +24,29 @@ const component = {
             }
           });
         });
+        // 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
       },
       text
     );