From 6a6457d465e97c450c2b4ad63b6aa8f9cdbafa1e Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Mon, 21 Sep 2026 12:31:22 +0300
Subject: [PATCH 1/2] let table header cells grow around a column filter

The compact 40px header row was set as a fixed height, but the header
cell stacks the label and the column filter in a column flex, so any
column with a filter rendered its select outside the cell.

Setting it as a minimum keeps label-only headers at 40px and lets the
filtered ones grow to fit.
---
 src/components/table/body/header/cell.js      |  2 +-
 src/components/table/body/header/cell.test.js | 42 +++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/components/table/body/header/cell.js b/src/components/table/body/header/cell.js
index 927a8df1..acc10330 100644
--- a/src/components/table/body/header/cell.js
+++ b/src/components/table/body/header/cell.js
@@ -123,7 +123,7 @@ const BodyHeaderCell = ({
       style={enableColumnReordering ? sortableStyle : undefined}
       flex={getColumnFlex(column, header, table.getState().columnSizing?.[column.id] != null)}
       width={`${header.subHeaders.length ? header.subHeaders.reduce((s, h) => s + h.column.getSize(), 0) : column.getSize()}px`}
-      height="40px"
+      height={{ min: "40px" }}
       position="relative"
       {...(column.getCanSort() &&
         coloredSortedColumn &&
diff --git a/src/components/table/body/header/cell.test.js b/src/components/table/body/header/cell.test.js
index 2c2d4fa9..8abdd22f 100644
--- a/src/components/table/body/header/cell.test.js
+++ b/src/components/table/body/header/cell.test.js
@@ -1,4 +1,6 @@
 import React from "react"
+import { renderWithProviders, screen, waitFor } from "testUtilities"
+import Table from "../../table"
 import { getHeaderTooltipContent } from "./cell"
 
 it("uses the canonical header string before rendered header content", () => {
@@ -18,3 +20,43 @@ it("marks complex headers for lazy visible-text resolution", () => {
   expect(getHeaderTooltipContent({ header: <span>Complete column name</span> })).toBe("")
   expect(getHeaderTooltipContent({})).toBeUndefined()
 })
+
+describe("header cell height", () => {
+  const column = {
+    id: "state",
+    accessorKey: "state",
+    header: "Status",
+    headerString: "Status",
+    filterFn: () => true,
+  }
+
+  const renderHeaderCell = meta =>
+    renderWithProviders(
+      <Table
+        data={[]}
+        dataColumns={[{ ...column, enableColumnFilter: !!meta, meta }]}
+        enableColumnFilters={!!meta}
+        enableResizing
+      />
+    )
+
+  const headerCell = async () =>
+    (await waitFor(() => screen.getByTestId("netdata-table-header-resize-handler-state")))
+      .parentElement
+
+  it("keeps the row compact when the header holds only a label", async () => {
+    renderHeaderCell()
+
+    expect(await headerCell()).toHaveStyleRule("min-height", "40px")
+  })
+
+  it("grows past the compact row so a header filter is not cut off", async () => {
+    renderHeaderCell({
+      filter: { component: "select", isMulti: true, options: [{ value: "Live", label: "Live" }] },
+    })
+
+    const cell = await headerCell()
+    expect(cell).toHaveStyleRule("min-height", "40px")
+    expect(cell).not.toHaveStyleRule("height", "40px")
+  })
+})

From 64d690f23f268c806ad4570de0c835086b2d7eae Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Mon, 21 Sep 2026 12:31:28 +0300
Subject: [PATCH 2/2] v5.5.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 30ffa020..50eb0759 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.5.11",
+  "version": "5.5.12",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",