fix(viewer): use ghost span in grid stack to enforce column name width

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/static/view.css

@@ -339,9 +339,24 @@ body {
   color: var(--muted);
 }
 
+.col-filter-wrap {
+  display: grid;
+}
+
+.col-filter-wrap > * {
+  grid-area: 1 / 1;
+}
+
+.col-filter-ghost {
+  visibility: hidden;
+  white-space: nowrap;
+  font: inherit;
+  pointer-events: none;
+  padding: 2px 4px;
+}
+
 .col-filter-text {
   width: 100%;
-  min-width: 40px;
   border: 1px solid transparent;
   border-radius: 3px;
   padding: 2px 4px;

web/static/view.js

@@ -72,11 +72,18 @@ document.addEventListener("DOMContentLoaded", () => {
           th.appendChild(select);
         }
       } else if (colName) {
+        const wrap = document.createElement("div");
+        wrap.className = "col-filter-wrap";
+
+        const ghost = document.createElement("span");
+        ghost.className = "col-filter-ghost";
+        ghost.setAttribute("aria-hidden", "true");
+        ghost.textContent = colName;
+
         const input = document.createElement("input");
         input.type = "text";
         input.className = "col-filter col-filter-text";
         input.placeholder = colName;
-        input.size = colName.length + 2;
         input.setAttribute("aria-label", "filter " + colName);
         let debounceTimer;
         input.addEventListener("input", () => {
@@ -86,8 +93,11 @@ document.addEventListener("DOMContentLoaded", () => {
             applyFilters();
           }, 300);
         });
+
+        wrap.appendChild(ghost);
+        wrap.appendChild(input);
         th.textContent = "";
-        th.appendChild(input);
+        th.appendChild(wrap);
       }
     });
   });