From cd89ebd4dd842fcdfe0bd1bbe42a0d05b1b67e34 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Wed, 4 Sep 2024 18:17:40 +0200
Subject: [PATCH] [EuiDataGrid] Fix header actions button causing cell height
 changes (#7999)

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 packages/eui/changelogs/upcoming/7999.md                      | 4 ++++
 .../datagrid/body/header/_data_grid_header_row.scss           | 2 ++
 2 files changed, 6 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/7999.md

diff --git a/packages/eui/changelogs/upcoming/7999.md b/packages/eui/changelogs/upcoming/7999.md
new file mode 100644
index 00000000000..6a8dcaed011
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7999.md
@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed a visual bug in compact density `EuiDataGrid`s, where the header cell height would increase when the actions button became visible
+
diff --git a/packages/eui/src/components/datagrid/body/header/_data_grid_header_row.scss b/packages/eui/src/components/datagrid/body/header/_data_grid_header_row.scss
index 627d823fc37..74d6bd427ae 100644
--- a/packages/eui/src/components/datagrid/body/header/_data_grid_header_row.scss
+++ b/packages/eui/src/components/datagrid/body/header/_data_grid_header_row.scss
@@ -91,6 +91,8 @@
     .euiPopover-isOpen {
       .euiDataGridHeaderCell__button {
         padding: $euiSizeXS;
+        // balance out additional button target size in header height, prevents increased header cell height
+        margin-block: -$euiSizeXS;
       }
 
       .euiDataGridHeaderCell__icon {