[EuiDataGrid] Fix header actions button causing cell height changes (#…

…7999) Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
elastic · Sep 4, 2024 · cd89ebd · cd89ebd
1 parent 7d83058
commit cd89ebd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/eui/changelogs/upcoming/7999.md 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
@@ -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 {