[EuiDataGrid] Fix scrollbar bouncing issue in v95.12.0 (#8041)

elastic · Sep 25, 2024 · ebe9833 · ebe9833
1 parent e2a233b
commit ebe9833
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 0 deletions.
diff --git a/...ence/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/...ence/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png
diff --git a/...rence/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/...rence/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png
diff --git a/packages/eui/changelogs/upcoming/8041.md b/packages/eui/changelogs/upcoming/8041.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed an `EuiDataGrid` rendering bug that was causing bouncing scrollbar issues
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts
@@ -156,6 +156,10 @@ export const euiDataGridRowCellStyles = (euiThemeContext: UseEuiTheme) => {
       // Control columns should be vertically centered with the *first line* of text
       // for both single and multi-line heights (see https://github.com/elastic/eui/issues/7897)
       controlColumn: css`
+        ${
+          // ❗ For some reason Chromium browsers will scrollbar stutter without this :|||
+          logicalCSS('max-height', '100%')
+        }
         display: inline-flex;
         align-items: start;
         gap: ${euiTheme.size.xxs}; /* EuiButtonIcons */