fix(viewer): prevent column header placeholder truncation via min-width

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
feat(viewer): merge filter row into table header using placeholder text
2026-06-19 14:45:19 +03:00 · 2026-06-19 14:41:31 +03:00 · 2026-05-21 14:26:30 +03:00
4 changed files with 146 additions and 100 deletions
--- a/viewer/render_test.go
+++ b/viewer/render_test.go
@@ -48,7 +48,7 @@ func TestRenderHTMLIncludesKnownSectionsAndFields(t *testing.T) {
 		}
 	}
 	for _, needle := range []string{
-		`<th class="status-column" aria-label="status"></th>`,
+		`<th data-col="status" class="status-column" aria-label="status"></th>`,
 		`<td class="status-column">`,
 		`<span class="status-badge status-ok" role="img" aria-label="OK" title="OK"></span>`,
 	} {
@@ -278,7 +278,7 @@ func TestRenderHTMLGroupsPCIeDevicesByClass(t *testing.T) {
 	if strings.Contains(text, "<th>device_class</th>") {
 		t.Fatalf("expected device_class column to be hidden from PCIe tables")
 	}
-	if !strings.Contains(text, `<th class="status-column" aria-label="status"></th>`) {
+	if !strings.Contains(text, `<th data-col="status" class="status-column" aria-label="status"></th>`) {
 		t.Fatalf("expected grouped PCIe tables to render compact status header cells")
 	}
 	if !strings.Contains(text, `<span class="status-badge status-warning" role="img" aria-label="Warning" title="Warning"></span>`) {
@@ -320,15 +320,12 @@ func TestRenderHTMLAddsSeverityFilterForEventLogs(t *testing.T) {
 	text := string(html)
 	for _, needle := range []string{
 		"Event Logs",
-		"All severities",
-		`<option value="critical">Critical</option>`,
-		`<option value="info">Info</option>`,
 		`data-severity="critical"`,
 		`data-severity="info"`,
-		`<th class="status-column" aria-label="severity"></th>`,
+		`<th data-col="severity_icon" class="status-column" aria-label="severity"></th>`,
 		`<span class="status-badge severity-info" role="img" aria-label="Info" title="Info"></span>`,
 		`<span class="status-badge severity-critical" role="img" aria-label="Critical" title="Critical"></span>`,
-		`<th>severity</th>`,
+		`<th data-col="severity">severity</th>`,
 		"/static/view.js",
 	} {
 		if !strings.Contains(text, needle) {
@@ -400,9 +397,9 @@ func TestRenderHTMLDisplaysHardwareContract210Fields(t *testing.T) {
 		"Storage",
 		"Event Logs",
 		"Platform Config",
-		"<th>logical_block_size_bytes</th>",
-		"<th>physical_block_size_bytes</th>",
-		"<th>metadata_bytes_per_block</th>",
+		`<th data-col="logical_block_size_bytes">logical_block_size_bytes</th>`,
+		`<th data-col="physical_block_size_bytes">physical_block_size_bytes</th>`,
+		`<th data-col="metadata_bytes_per_block">metadata_bytes_per_block</th>`,
 		"512",
 		"4096",
 		"8",
--- a/web/static/view.css
+++ b/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%;
 }
@@ -330,41 +334,57 @@ body {
  display: block;
 }

-.table-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin: 0 0 10px;
-}
-
-.table-toolbar-label {
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.table-severity-filter {
-  min-width: 180px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 7px 10px;
-  background: var(--surface);
-  color: var(--ink);
-  font: inherit;
-}
-
-.table-severity-filter:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
 .table-filter-empty {
  margin: 10px 0 0;
  color: var(--muted);
 }

+.col-filter-text {
+  width: 100%;
+  min-width: 40px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 2px 4px;
+  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);
+  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;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 3px 4px;
+  font: inherit;
+  font-size: 12px;
+  background: var(--surface);
+  color: var(--ink);
+}
+
 .data-table .status-column {
  width: 1%;
  white-space: nowrap;
@@ -425,13 +445,5 @@ body {
    grid-column: auto;
  }

-  .table-toolbar {
-    align-items: stretch;
-    flex-direction: column;
-  }

-  .table-severity-filter {
-    min-width: 0;
-    width: 100%;
-  }
 }
--- a/web/static/view.js
+++ b/web/static/view.js
@@ -1,31 +1,94 @@
 document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".table-filterable").forEach((container) => {
-    const select = container.querySelector(".table-severity-filter");
-    if (!select) {
-      return;
+    const table = container.querySelector(".data-table");
+    if (!table) return;
+
+    const thead = table.querySelector("thead");
+    const headerRow = thead.querySelector("tr");
+    const headerCells = Array.from(headerRow.querySelectorAll("th"));
+    const emptyNotice = container.querySelector(".table-filter-empty");
+    const rows = Array.from(table.querySelectorAll("tbody tr"));
+
+    const activeFilters = new Map();
+
+    function getCellValue(cell, colName) {
+      if (colName === "severity_icon" || colName === "status") {
+        return (cell.querySelector(".status-badge")?.title || "").toLowerCase();
+      }
+      return cell.textContent.trim().toLowerCase();
    }

-    const rows = Array.from(container.querySelectorAll("tbody tr[data-severity-row='true']"));
-    const emptyNotice = container.querySelector(".table-filter-empty");
-
-    const applyFilter = () => {
-      const selected = select.value;
+    function applyFilters() {
      let visibleCount = 0;
-
      rows.forEach((row) => {
-        const matches = selected === "" || row.dataset.severity === selected;
-        row.hidden = !matches;
-        if (matches) {
-          visibleCount += 1;
-        }
+        const cells = row.querySelectorAll("td");
+        let visible = true;
+        activeFilters.forEach((filterValue, colIndex) => {
+          if (!filterValue) return;
+          const cell = cells[colIndex];
+          if (!cell) { visible = false; return; }
+          const colName = headerCells[colIndex]?.dataset.col || "";
+          if (!getCellValue(cell, colName).includes(filterValue)) visible = false;
+        });
+        row.hidden = !visible;
+        if (visible) visibleCount++;
      });
+      if (emptyNotice) emptyNotice.hidden = visibleCount > 0;
+    }

-      if (emptyNotice) {
-        emptyNotice.hidden = visibleCount !== 0;
+    headerCells.forEach((th, colIndex) => {
+      const colName = th.dataset.col || "";
+      const isIconCol = colName === "severity_icon" || colName === "status";
+
+      if (isIconCol) {
+        const select = document.createElement("select");
+        select.className = "col-filter col-filter-select";
+        select.setAttribute("aria-label", "filter " + (th.getAttribute("aria-label") || colName));
+        const allOpt = document.createElement("option");
+        allOpt.value = "";
+        allOpt.textContent = "All";
+        select.appendChild(allOpt);
+
+        const seen = new Set();
+        rows.forEach((row) => {
+          const cell = row.querySelectorAll("td")[colIndex];
+          if (!cell) return;
+          const val = cell.querySelector(".status-badge")?.title || "";
+          if (val && !seen.has(val)) {
+            seen.add(val);
+            const opt = document.createElement("option");
+            opt.value = val.toLowerCase();
+            opt.textContent = val;
+            select.appendChild(opt);
+          }
+        });
+
+        if (select.options.length > 1) {
+          select.addEventListener("change", () => {
+            activeFilters.set(colIndex, select.value);
+            applyFilters();
+          });
+          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;
+        input.style.minWidth = `${colName.length + 1}ch`;
+        input.setAttribute("aria-label", "filter " + colName);
+        let debounceTimer;
+        input.addEventListener("input", () => {
+          clearTimeout(debounceTimer);
+          debounceTimer = setTimeout(() => {
+            activeFilters.set(colIndex, input.value.trim().toLowerCase());
+            applyFilters();
+          }, 300);
+        });
+        th.textContent = "";
+        th.appendChild(input);
      }
-    };
-
-    select.addEventListener("change", applyFilter);
-    applyFilter();
+    });
  });
 });
--- a/web/templates/view.html
+++ b/web/templates/view.html
@@ -64,24 +64,13 @@

      {{ if eq .Kind "table" }}
      {{ $section := . }}
-      <div class="table-block {{ if .SeverityOptions }}table-filterable{{ end }}">
-        {{ if .SeverityOptions }}
-        <div class="table-toolbar">
-          <label class="table-toolbar-label" for="{{ .ID }}-severity-filter">Severity</label>
-          <select class="table-severity-filter" id="{{ .ID }}-severity-filter">
-            <option value="">All severities</option>
-            {{ range .SeverityOptions }}
-            <option value="{{ .Value }}">{{ .Label }}</option>
-            {{ end }}
-          </select>
-        </div>
-        {{ end }}
+      <div class="table-block table-filterable">
        <div class="table-wrap">
          <table class="data-table">
            <thead>
              <tr>
                {{ range .Columns }}
-                <th{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
+                <th data-col="{{ . }}"{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
                {{ end }}
              </tr>
            </thead>
@@ -108,9 +97,7 @@
            </tbody>
          </table>
        </div>
-        {{ if .SeverityOptions }}
-        <p class="table-filter-empty" hidden>No rows match the selected severity.</p>
-        {{ end }}
+        <p class="table-filter-empty" hidden>No rows match the active filters.</p>
      </div>
      {{ end }}

@@ -119,24 +106,13 @@
      <div class="table-group">
        <h3>{{ .Title }}</h3>
        {{ $group := . }}
-        <div class="table-block {{ if .SeverityOptions }}table-filterable{{ end }}">
-          {{ if .SeverityOptions }}
-          <div class="table-toolbar">
-            <label class="table-toolbar-label">Severity</label>
-            <select class="table-severity-filter">
-              <option value="">All severities</option>
-              {{ range .SeverityOptions }}
-              <option value="{{ .Value }}">{{ .Label }}</option>
-              {{ end }}
-            </select>
-          </div>
-          {{ end }}
+        <div class="table-block table-filterable">
          <div class="table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  {{ range .Columns }}
-                  <th{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
+                  <th data-col="{{ . }}"{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
                  {{ end }}
                </tr>
              </thead>
@@ -163,9 +139,7 @@
              </tbody>
            </table>
          </div>
-          {{ if .SeverityOptions }}
-          <p class="table-filter-empty" hidden>No rows match the selected severity.</p>
-          {{ end }}
+          <p class="table-filter-empty" hidden>No rows match the active filters.</p>
        </div>
      </div>
      {{ end }}