v5.5.12

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",

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 &&

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")
+  })
+})