diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index 628f4b03350..8f6272aa1fa 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png index a9104c81318..4545d0ff312 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Auto.png differ diff --git a/packages/eui/changelogs/upcoming/8041.md b/packages/eui/changelogs/upcoming/8041.md new file mode 100644 index 00000000000..97324d59c5f --- /dev/null +++ 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 index c0b63e1b082..a8bb57c8a3e 100644 --- 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 */