revert(viewer): restore separate filter row below header

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

web/static/view.css

@@ -289,10 +289,6 @@ body {
   border-top: 0;
 }
 
-.data-table thead th:has(.col-filter) {
-  padding: 6px 10px;
-}
-
 .kv-table th {
   width: 1%;
 }
@@ -339,55 +335,29 @@ 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;
+.filter-row th {
+  background: var(--surface-2);
+  padding: 5px 8px;
+  border-top: 1px solid var(--border-lite);
 }
 
 .col-filter-text {
   width: 100%;
-  border: 1px solid transparent;
+  min-width: 40px;
+  border: 1px solid var(--border);
   border-radius: 3px;
-  padding: 2px 4px;
+  padding: 4px 6px;
   font: inherit;
-  font-size: inherit;
-  font-weight: 700;
-  background: transparent;
-  color: var(--ink);
-}
-
-.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);
+  font-size: 12px;
   background: var(--surface);
-  font-weight: 400;
+  color: var(--ink);
+}
+
+.col-filter-text:focus-visible {
   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,8 +36,14 @@ 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) {
@@ -68,22 +74,12 @@ document.addEventListener("DOMContentLoaded", () => {
             activeFilters.set(colIndex, select.value);
             applyFilters();
           });
-          th.textContent = "";
-          th.appendChild(select);
+          filterTh.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.setAttribute("aria-label", "filter " + colName);
         let debounceTimer;
         input.addEventListener("input", () => {
@@ -93,12 +89,12 @@ document.addEventListener("DOMContentLoaded", () => {
             applyFilters();
           }, 300);
         });
-
-        wrap.appendChild(ghost);
-        wrap.appendChild(input);
-        th.textContent = "";
-        th.appendChild(wrap);
+        filterTh.appendChild(input);
       }
+
+      filterRow.appendChild(filterTh);
     });
+
+    thead.appendChild(filterRow);
   });
 });