fix(viewer): set min-width on th cell to prevent column header truncation

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

web/static/view.css

@@ -289,6 +289,10 @@ body {
   border-top: 0;
 }
 
+.data-table thead th:has(.col-filter) {
+  padding: 6px 10px;
+}
+
 .kv-table th {
   width: 1%;
 }
@@ -335,29 +339,40 @@ body {
   color: var(--muted);
 }
 
-.filter-row th {
-  background: var(--surface-2);
-  padding: 5px 8px;
-  border-top: 1px solid var(--border-lite);
-}
-
 .col-filter-text {
   width: 100%;
   min-width: 40px;
-  border: 1px solid var(--border);
+  border: 1px solid transparent;
   border-radius: 3px;
-  padding: 4px 6px;
+  padding: 2px 4px;
   font: inherit;
-  font-size: 12px;
-  background: var(--surface);
+  font-size: inherit;
+  font-weight: 700;
+  background: transparent;
   color: var(--ink);
 }
 
-.col-filter-text:focus-visible {
+.col-filter-text::placeholder {
+  color: var(--ink);
+  opacity: 1;
+  font-weight: 700;
+}
+
+.col-filter-text:focus-visible,
+.col-filter-text:hover {
+  border-color: var(--border);
+  background: var(--surface);
+  font-weight: 400;
   outline: 2px solid var(--accent);
   outline-offset: 1px;
 }
 
+.col-filter-text:not(:placeholder-shown) {
+  border-color: var(--border);
+  background: var(--surface);
+  font-weight: 400;
+}
+
 .col-filter-select {
   width: 100%;
   min-width: 40px;

web/static/view.js

@@ -36,14 +36,8 @@ document.addEventListener("DOMContentLoaded", () => {
       if (emptyNotice) emptyNotice.hidden = visibleCount > 0;
     }
 
-    const filterRow = document.createElement("tr");
-    filterRow.className = "filter-row";
-
     headerCells.forEach((th, colIndex) => {
       const colName = th.dataset.col || "";
-      const filterTh = document.createElement("th");
-      if (th.className) filterTh.className = th.className;
-
       const isIconCol = colName === "severity_icon" || colName === "status";
 
       if (isIconCol) {
@@ -74,12 +68,15 @@ document.addEventListener("DOMContentLoaded", () => {
             activeFilters.set(colIndex, select.value);
             applyFilters();
           });
-          filterTh.appendChild(select);
+          th.textContent = "";
+          th.appendChild(select);
         }
       } else if (colName) {
         const input = document.createElement("input");
         input.type = "text";
         input.className = "col-filter col-filter-text";
+        input.placeholder = colName;
+        th.style.minWidth = `calc(${colName.length}ch + 20px)`;
         input.setAttribute("aria-label", "filter " + colName);
         let debounceTimer;
         input.addEventListener("input", () => {
@@ -89,12 +86,9 @@ document.addEventListener("DOMContentLoaded", () => {
             applyFilters();
           }, 300);
         });
-        filterTh.appendChild(input);
+        th.textContent = "";
+        th.appendChild(input);
       }
-
-      filterRow.appendChild(filterTh);
     });
-
-    thead.appendChild(filterRow);
   });
 });