diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png
index 3d2d9ddbd79..3d009c8956e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
index 26a5532c33f..708615cc615 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png
index f46ffa432a8..4952fd9b5a4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
index 5d32f262af1..c65defa64bb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png
index bf559e38f18..8037495d02e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png
index b66ac1bbf0a..d4cf7fc11c5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png
index 22b153c35da..6f18325f1e4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png
index 0288dc080df..6a252e0e65a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png
index 8027b468a2f..313d1b05b95 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png
index 4351c1241b7..c4d0cb02417 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png
index d4ee1037805..f962c6ac2bd 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png differ
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 253b80b9dc6..628f4b03350 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_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png
index f864e1833c9..a1298f5183b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png
new file mode 100644
index 00000000000..5c3a8414c7b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png
index b66d31ed352..f2c3edcaa56 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png
index 4d4934226d4..729e1e7b9f5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png
new file mode 100644
index 00000000000..ad18e10918c
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png
index e68818083ae..9c1250bf122 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png
index c3579f050b9..a665d83a29f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png
index 161691678a4..a5e204c13de 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png
index 1c21d47b978..d2ee5b5cf93 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png
index 6093d2348ea..49a222cd160 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
index d4254b541dc..b381de221c2 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png
index 05f3381944d..c986dc99409 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png
index 518df5ae9b0..08fa249f8b8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Custom_Header_Content.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png
index 3e4d7ad724a..4fc1dd76c87 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png
index c9131c140d6..3f3ff2ad7df 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Virtualization.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png
index 24fb3fc5edf..88e12e3f057 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Compact.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png
index 60f8d691952..ca5c3ede185 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Expanded.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png
index 9548cf694e3..b5c6edc5d97 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Horizontal_Lines.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png
index fb999cb9cc2..626db81947e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Minimal.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png
index 5058b0eefb6..3c87f7385a4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_gridStyle_prop_Playground.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 fc30b4d1935..a9104c81318 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/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png
index 897d9acac4e..7de3923ab07 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png
new file mode 100644
index 00000000000..c5fdbabe856
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Line_Height_Control_Column.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png
index be44c79b2f9..a78f4f33702 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Custom_Row_Heights.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png
index c114eb435da..5cdf1548b04 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png
new file mode 100644
index 00000000000..7863cd55429
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Line_Count_1.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png
index 211b81490ed..ef691fbcec9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_rowHeightsOptions_prop_Static_Height.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png
index f9ee3ca682a..6889ce53404 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_No_Toolbar.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png
index 654bcea2691..ed45c4a6137 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Render_Custom_Toolbar.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png
index f7a5a17659b..89e7edba399 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Toolbar_Visibility_Options.png differ
diff --git a/packages/eui/changelogs/upcoming/8025.md b/packages/eui/changelogs/upcoming/8025.md
new file mode 100644
index 00000000000..9de03d70aea
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8025.md
@@ -0,0 +1,6 @@
+**Bug fixes**
+
+- Fixed several `EuiDataGrid` row height bugs:
+  - Fixed row heights not recalculating when `rowHeightOptions.lineHeight`, `gridStyles.fontSize`, or `gridStyles.cellPadding` changed
+  - Fixed incorrect height calculations for `rowHeightOptions.rowHeights` with `lineCount`s
+  - Fixed control column content to align better with multi-line row heights, as well as custom line-heights
diff --git a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 84fd9d9b42c..2a9baa3cc10 100644
--- a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -611,7 +611,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
-                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
                   title="A"
                 >
                   A
@@ -653,7 +653,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
-                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
                   title="B"
                 >
                   B
@@ -989,7 +989,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
-                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
                   title="A"
                 >
                   A
@@ -1031,7 +1031,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
-                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
                   title="B"
                 >
                   B
@@ -1085,7 +1085,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-defaultHeight"
+                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-autoHeight"
                 data-datagrid-cellcontent="true"
               >
                 0
@@ -1142,7 +1142,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-defaultHeight"
+                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-autoHeight"
                 data-datagrid-cellcontent="true"
               >
                 0
@@ -1161,7 +1161,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-defaultHeight"
+                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-autoHeight"
                 data-datagrid-cellcontent="true"
               >
                 1
@@ -1218,7 +1218,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-defaultHeight"
+                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-autoHeight"
                 data-datagrid-cellcontent="true"
               >
                 1
@@ -1237,7 +1237,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-defaultHeight"
+                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-autoHeight"
                 data-datagrid-cellcontent="true"
               >
                 2
@@ -1294,7 +1294,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-defaultHeight"
+                class="euiDataGridRowCell__content euiDataGridRowCell__content--defaultHeight emotion-euiDataGridRowCell__content-controlColumn-autoHeight"
                 data-datagrid-cellcontent="true"
               >
                 2
@@ -1478,7 +1478,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
-                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
                   title="A"
                 >
                   Column A
@@ -1520,7 +1520,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
-                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
                   title="B"
                 >
                   <div>
@@ -1840,7 +1840,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
-                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
                   title="A"
                 >
                   A
@@ -1882,7 +1882,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                   data-test-subj="dataGridColumnResizer"
                 />
                 <div
-                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+                  class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
                   title="B"
                 >
                   B
diff --git a/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
index 79b0a64b860..2328e3d5f8d 100644
--- a/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
         data-test-subj="dataGridColumnResizer"
       />
       <div
-        class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+        class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
         title="columnA"
       >
         columnA
@@ -68,7 +68,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
         data-test-subj="dataGridColumnResizer"
       />
       <div
-        class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+        class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
         title="columnB"
       >
         columnB
diff --git a/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
index e1a09ff8136..c30c1f40231 100644
--- a/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
+++ b/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           data-test-subj="dataGridColumnResizer"
         />
         <div
-          class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+          class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
           title="columnA"
         >
           columnA
@@ -72,7 +72,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           data-test-subj="dataGridColumnResizer"
         />
         <div
-          class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+          class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
           title="columnB"
         >
           columnB
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 36c45a74da3..c0b63e1b082 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
@@ -101,6 +101,7 @@ export const euiDataGridCellOutlineSelectors = (parentSelector = '&') => {
 };
 
 export const euiDataGridRowCellStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   const cellOutline = euiDataGridCellOutlineStyles(euiThemeContext);
   const { outline: outlineSelectors } = euiDataGridCellOutlineSelectors();
 
@@ -146,17 +147,45 @@ export const euiDataGridRowCellStyles = (euiThemeContext: UseEuiTheme) => {
       euiDataGridRowCell__content: css`
         overflow: hidden;
       `,
-      controlColumn: css`
-        ${logicalCSS('max-height', '100%')}
-        display: flex;
-        align-items: center;
-      `,
       autoHeight: css`
         ${logicalCSS('height', 'auto')}
       `,
       defaultHeight: css`
         ${logicalCSS('height', '100%')}
       `,
+      // 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`
+        display: inline-flex;
+        align-items: start;
+        gap: ${euiTheme.size.xxs}; /* EuiButtonIcons */
+
+        /* FF and webkit browsers have more centered vertical alignment behind undocumented browser prefixes */
+        vertical-align: -webkit-baseline-middle;
+        vertical-align: -moz-middle-with-baseline;
+
+        /* Compact sizing affordance for EuiButtonIcons */
+        .euiDataGrid--fontSizeSmall
+          &:where(.euiDataGridRowCell__content--defaultHeight) {
+          ${logicalCSS('height', '100%')}
+          align-items: center;
+        }
+
+        /* Line up single EuiCheckboxes a bit better (insert Peter Griffin blinds gif) */
+        .euiCheckbox:not(:has(label)) {
+          display: inline;
+
+          .euiCheckbox__square {
+            display: inline-flex;
+            vertical-align: text-bottom;
+
+            /* sub alignment looks better on Firefox, text-bottom looks better on webkit 💀 */
+            @supports (vertical-align: -moz-middle-with-baseline) {
+              vertical-align: sub;
+            }
+          }
+        }
+      `,
     },
   };
 };
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.test.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.test.tsx
index b8fcfe6d774..b12992b8494 100644
--- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.test.tsx
+++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.test.tsx
@@ -45,6 +45,7 @@ describe('EuiDataGridCell', () => {
     ),
     popoverContext: mockPopoverContext,
     rowHeightUtils: mockRowHeightUtils,
+    gridStyles: {},
   };
 
   beforeEach(() => jest.clearAllMocks());
@@ -202,6 +203,12 @@ describe('EuiDataGridCell', () => {
         it('rowHeightsOptions', () => {
           component.setProps({ rowHeightsOptions: { defaultHeight: 'auto' } });
         });
+        it('gridStyles.fontSize', () => {
+          component.setProps({ gridStyles: { fontSize: 's' } });
+        });
+        it('gridStyles.cellPadding', () => {
+          component.setProps({ gridStyles: { cellPadding: 'l' } });
+        });
         it('renderCellValue', () => {
           component.setProps({ renderCellValue: () => <div>test</div> });
         });
@@ -254,7 +261,10 @@ describe('EuiDataGridCell', () => {
     });
 
     it('should not update for prop/state changes not specified above', () => {
-      component.setProps({ className: 'test' });
+      component.setProps({
+        className: 'test',
+        gridStyles: { header: 'underline' },
+      });
       expect(shouldComponentUpdate).toHaveReturnedWith(false);
     });
   });
@@ -625,7 +635,7 @@ describe('EuiDataGridCell', () => {
           callMethod(component);
           expect(
             mockRowHeightUtils.calculateHeightForLineCount
-          ).toHaveBeenCalledWith(expect.any(HTMLElement), 3, false);
+          ).toHaveBeenCalledWith(expect.any(HTMLElement), 3);
           expect(setRowHeight).toHaveBeenCalled();
         });
       });
@@ -647,25 +657,76 @@ describe('EuiDataGridCell', () => {
           callMethod(component);
           expect(
             mockRowHeightUtils.calculateHeightForLineCount
-          ).toHaveBeenCalledWith(expect.any(HTMLElement), 10, true);
+          ).toHaveBeenCalledWith(expect.any(HTMLElement), 10);
           expect(mockRowHeightUtils.setRowHeight).toHaveBeenCalled();
           expect(setRowHeight).not.toHaveBeenCalled();
         });
+
+        it('recalculates when the override for the row changes', () => {
+          const component = mount(
+            <EuiDataGridCell {...requiredProps} setRowHeight={setRowHeight} />
+          );
+
+          component.setProps({
+            rowHeightsOptions: {
+              rowHeights: {
+                0: { lineCount: 2 },
+              },
+            },
+          });
+          expect(mockRowHeightUtils.setRowHeight).toHaveBeenCalledTimes(1);
+
+          // Handle row index changes as well
+          component.setProps({
+            rowHeightsOptions: {
+              rowHeights: {
+                0: { lineCount: 2 },
+                2: { lineCount: 4 },
+              },
+            },
+            rowIndex: 2,
+          });
+          expect(mockRowHeightUtils.setRowHeight).toHaveBeenCalledTimes(2);
+
+          expect(setRowHeight).not.toHaveBeenCalled();
+        });
       });
 
-      it('recalculates when rowHeightsOptions.defaultHeight.lineCount changes', () => {
+      it('recalculates when props that affect row/line height change', () => {
         const component = mount(
           <EuiDataGridCell
             {...requiredProps}
-            rowHeightsOptions={{ defaultHeight: { lineCount: 7 } }}
+            rowHeightsOptions={{ defaultHeight: { lineCount: 4 } }}
             setRowHeight={setRowHeight}
           />
         );
+        component.setProps({
+          rowHeightsOptions: { defaultHeight: { lineCount: 2 } },
+        });
+        expect(setRowHeight).toHaveBeenCalledTimes(1);
+
+        // Other props that can affect row heights
 
+        const rowHeightsOptionsWithLineHeight = {
+          defaultHeight: { lineCount: 2 },
+          lineHeight: '3',
+        };
         component.setProps({
-          rowHeightsOptions: { defaultHeight: { lineCount: 6 } },
+          rowHeightsOptions: rowHeightsOptionsWithLineHeight,
         });
-        expect(setRowHeight).toHaveBeenCalled();
+        expect(setRowHeight).toHaveBeenCalledTimes(2);
+
+        component.setProps({
+          rowHeightsOptions: rowHeightsOptionsWithLineHeight,
+          gridStyles: { cellPadding: 'l' },
+        });
+        expect(setRowHeight).toHaveBeenCalledTimes(3);
+
+        component.setProps({
+          rowHeightsOptions: rowHeightsOptionsWithLineHeight,
+          gridStyles: { cellPadding: 'l', fontSize: 'l' },
+        });
+        expect(setRowHeight).toHaveBeenCalledTimes(4);
       });
 
       it('calculates undefined heights as single rows with a lineCount of 1', () => {
@@ -680,7 +741,7 @@ describe('EuiDataGridCell', () => {
         callMethod(component);
         expect(
           mockRowHeightUtils.calculateHeightForLineCount
-        ).toHaveBeenCalledWith(expect.any(HTMLElement), 1, false);
+        ).toHaveBeenCalledWith(expect.any(HTMLElement), 1);
         expect(setRowHeight).toHaveBeenCalled();
       });
 
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx
index 7aee6c986a7..d69d652225e 100644
--- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx
+++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx
@@ -96,14 +96,7 @@ const EuiDataGridCellContent: FunctionComponent<
     const cssStyles = [
       styles.content.euiDataGridRowCell__content,
       ...(isControlColumn
-        ? [
-            // Control column cells should not be vertically centered (defaultHeight) except
-            // on single rows. They should be top-aligned for auto and lineCount heights
-            styles.content.controlColumn,
-            cellHeightType === 'default'
-              ? styles.content.defaultHeight
-              : styles.content.autoHeight,
-          ]
+        ? [styles.content.controlColumn, styles.content.autoHeight]
         : [
             // Regular data cells should always inherit height from the row wrapper,
             // except for auto height
@@ -217,8 +210,7 @@ export class EuiDataGridCell extends Component<
 
       const height = rowHeightUtils!.calculateHeightForLineCount(
         this.cellContentsRef,
-        lineCount,
-        shouldUseHeightsCache
+        lineCount
       );
 
       if (shouldUseHeightsCache) {
@@ -291,7 +283,13 @@ export class EuiDataGridCell extends Component<
 
     if (
       this.props.rowHeightsOptions?.defaultHeight !==
-      prevProps.rowHeightsOptions?.defaultHeight
+        prevProps.rowHeightsOptions?.defaultHeight ||
+      this.props.rowHeightsOptions?.rowHeights?.[this.props.rowIndex] !==
+        prevProps.rowHeightsOptions?.rowHeights?.[prevProps.rowIndex] ||
+      this.props.rowHeightsOptions?.lineHeight !==
+        prevProps.rowHeightsOptions?.lineHeight ||
+      this.props.gridStyles?.fontSize !== prevProps.gridStyles?.fontSize ||
+      this.props.gridStyles?.cellPadding !== prevProps.gridStyles?.cellPadding
     ) {
       this.recalculateLineHeight();
     }
@@ -346,6 +344,12 @@ export class EuiDataGridCell extends Component<
     if (nextProps.width !== this.props.width) return true;
     if (nextProps.rowHeightsOptions !== this.props.rowHeightsOptions)
       return true;
+    if (nextProps.gridStyles?.fontSize !== this.props.gridStyles?.fontSize)
+      return true;
+    if (
+      nextProps.gridStyles?.cellPadding !== this.props.gridStyles?.cellPadding
+    )
+      return true;
     if (nextProps.renderCellValue !== this.props.renderCellValue) return true;
     if (nextProps.renderCellPopover !== this.props.renderCellPopover)
       return true;
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx
index 2311456987c..96ac4eaf443 100644
--- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx
+++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.test.tsx
@@ -22,6 +22,7 @@ describe('Cell', () => {
     renderCellValue: () => null,
     interactiveCellId: '',
     rowHeightUtils: new RowHeightUtils(),
+    gridStyles: {},
     schema: {},
     schemaDetectors,
     columns: [{ id: 'C' }],
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx
index a95f327a73e..6ad00714702 100644
--- a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx
+++ b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx
@@ -29,6 +29,7 @@ export type CellProps = Pick<
   | 'cellContext'
   | 'renderCellPopover'
   | 'interactiveCellId'
+  | 'gridStyles'
   | 'rowHeightsOptions'
   | 'rowHeightUtils'
   | 'rowManager'
diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx
index 6937f064173..6612bc07c56 100644
--- a/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx
+++ b/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx
@@ -143,6 +143,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
       setRowHeight,
       rowHeightsOptions,
       rowHeightUtils,
+      gridStyles,
     };
   }, [
     schema,
@@ -161,6 +162,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent<
     setRowHeight,
     rowHeightsOptions,
     rowHeightUtils,
+    gridStyles,
   ]);
 
   const Cell = useCallback<EuiDataGridCustomBodyProps['Cell']>(
diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx
index 4030afb2250..48b0bad2c23 100644
--- a/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx
+++ b/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx
@@ -337,6 +337,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
           rowManager,
           pagination,
           headerRowHeight,
+          gridStyles,
         };
       }, [
         schemaDetectors,
@@ -357,6 +358,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
         rowManager,
         pagination,
         headerRowHeight,
+        gridStyles,
       ]);
 
       const rowWrapperContextValue = useMemo(() => {
diff --git a/packages/eui/src/components/datagrid/body/footer/data_grid_footer_row.tsx b/packages/eui/src/components/datagrid/body/footer/data_grid_footer_row.tsx
index 30b01cfcf02..f68006d961e 100644
--- a/packages/eui/src/components/datagrid/body/footer/data_grid_footer_row.tsx
+++ b/packages/eui/src/components/datagrid/body/footer/data_grid_footer_row.tsx
@@ -61,6 +61,7 @@ const EuiDataGridFooterRow = memo(
         visibleRowIndex,
         interactiveCellId,
         popoverContext,
+        gridStyles,
       };
 
       return (
diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts
index b3efb1a7614..3b68cd3cbce 100644
--- a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts
+++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts
@@ -29,10 +29,6 @@ export const euiDataGridHeaderCellStyles = (euiThemeContext: UseEuiTheme) => {
       flex-grow: 1; /* ensures content stretches and allows for manual layout styles to apply */
       ${euiTextTruncate()}
     `,
-    // Overwrite inherited 'center' styles from <button>
-    left: css`
-      ${logicalTextAlignCSS('left')}
-    `,
     // Numeric and currency schemas are aligned to the right
     right: css`
       ${logicalTextAlignCSS('right')}
diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
index 298ea00ed42..31fd8ec0c37 100644
--- a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
+++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
@@ -149,9 +149,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
       const styles = useEuiMemoizedStyles(euiDataGridHeaderCellStyles);
       const contentStyles = [
         styles.euiDataGridHeaderCell__content,
-        columnType === 'numeric' || columnType === 'currency'
-          ? styles.right
-          : styles.left,
+        (columnType === 'numeric' || columnType === 'currency') && styles.right,
       ];
 
       return (
diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx
index 1b1048abdf6..8c96fb03919 100644
--- a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx
+++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx
@@ -68,7 +68,7 @@ describe('EuiDataGridHeaderRow', () => {
             data-test-subj="dataGridColumnResizer"
           />
           <div
-            class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-left"
+            class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
             title="someColumn"
           >
             someColumn
diff --git a/packages/eui/src/components/datagrid/data_grid.stories.utils.tsx b/packages/eui/src/components/datagrid/data_grid.stories.utils.tsx
index f4c2d5b4da6..d64eaa2cdeb 100644
--- a/packages/eui/src/components/datagrid/data_grid.stories.utils.tsx
+++ b/packages/eui/src/components/datagrid/data_grid.stories.utils.tsx
@@ -14,11 +14,14 @@ import React, {
   useState,
   FunctionComponent,
 } from 'react';
+import { css } from '@emotion/react';
 import { faker } from '@faker-js/faker';
 
 import { EuiLink } from '../link';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiButtonIcon } from '../button';
+import { EuiCheckbox } from '../form';
+import { EuiBadge } from '../badge';
 
 import { MINIMUM_WIDTH_FOR_GRID_CONTROLS } from './controls/data_grid_toolbar';
 import type {
@@ -73,7 +76,7 @@ export const raw_data = Array.from({ length: 10 }).map((_, i) => {
       raw: name,
     },
     email: {
-      formatted: <EuiLink href="">{faker.internet.email()}</EuiLink>,
+      formatted: <EuiLink href="">{email}</EuiLink>,
       raw: email,
     },
     location: (
@@ -82,9 +85,18 @@ export const raw_data = Array.from({ length: 10 }).map((_, i) => {
         <EuiLink href="https://google.com">{faker.location.country()}</EuiLink>
       </>
     ),
-    date: `${date}`,
+    date,
     account: faker.finance.accountNumber(),
-    version: faker.system.semver(),
+    version: (
+      <EuiBadge
+        // Tweak the badge's vertical centering
+        css={css`
+          vertical-align: text-bottom;
+        `}
+      >
+        {faker.system.semver()}
+      </EuiBadge>
+    ),
   };
 });
 
@@ -185,6 +197,7 @@ const columns = [
     initialWidth: 70,
     isResizable: false,
     actions: false as const,
+    schema: 'version', // Custom schema + CSS
   },
 ];
 
@@ -212,31 +225,50 @@ const RenderCellValue = ({
 
 export const defaultStorybookArgs = {
   'aria-label': 'EuiDataGrid',
+  css: css`
+    .euiDataGridRowCell--version,
+    .euiDataGridHeaderCell--version {
+      text-align: center;
+    }
+  `,
   columns,
   rowCount: 10,
   renderCellValue: RenderCellValue,
   trailingControlColumns: [
     {
       id: 'trailing-actions',
-      width: 40,
+      width: 64,
       headerCellRender: () => (
         <EuiScreenReaderOnly>
-          <span>Trailing actions</span>
+          <span>Row actions</span>
         </EuiScreenReaderOnly>
       ),
-      rowCellRender: () => <EuiButtonIcon iconType="boxesHorizontal" />,
+      rowCellRender: () => (
+        <>
+          <EuiButtonIcon iconType="indexEdit" />
+          <EuiButtonIcon iconType="boxesHorizontal" />
+        </>
+      ),
     },
   ],
   leadingControlColumns: [
     {
       id: 'leading-actions',
-      width: 40,
+      width: 32,
       headerCellRender: () => (
-        <EuiScreenReaderOnly>
-          <span>Leading actions</span>
-        </EuiScreenReaderOnly>
+        <EuiCheckbox
+          id="selectAll"
+          aria-label="Select all rows"
+          onChange={() => {}}
+        />
+      ),
+      rowCellRender: ({ rowIndex }: EuiDataGridCellValueElementProps) => (
+        <EuiCheckbox
+          id={`selectRow${rowIndex}`}
+          aria-label={`Select row ${rowIndex + 1}`}
+          onChange={() => {}}
+        />
       ),
-      rowCellRender: () => <EuiButtonIcon iconType="boxesHorizontal" />,
     },
   ],
   // setup for easier testing/QA
diff --git a/packages/eui/src/components/datagrid/data_grid_row_heights.stories.tsx b/packages/eui/src/components/datagrid/data_grid_row_heights.stories.tsx
index 665fc373af0..4b69a84b8d3 100644
--- a/packages/eui/src/components/datagrid/data_grid_row_heights.stories.tsx
+++ b/packages/eui/src/components/datagrid/data_grid_row_heights.stories.tsx
@@ -66,6 +66,20 @@ export const LineCount: Story = {
   ),
 };
 
+// Visual regression test for https://github.com/elastic/eui/issues/7780#issuecomment-2183179080
+// lineCount: 1 should fall back to default/undefined height, and
+// overflowing content should *not* be cut off by 'padding'
+export const LineCount1: Story = {
+  tags: ['vrt-only'],
+  render: () => (
+    <StatefulDataGrid
+      {...storyArgs}
+      rowHeightsOptions={{ defaultHeight: { lineCount: 1 } }}
+      gridStyle={{ fontSize: 's', cellPadding: 's' }}
+    />
+  ),
+};
+
 export const StaticHeight: Story = {
   args: {
     defaultHeight: { height: 48 },
@@ -79,15 +93,16 @@ export const CustomRowHeights: Story = {
   parameters: { controls: { include: ['rowHeights'] } },
   args: {
     rowHeights: {
-      2: 'auto',
-      3: 48,
-      4: {
+      1: 'auto',
+      2: 48,
+      3: {
         height: 56,
       },
-      5: {
+      4: {
         lineCount: 2,
       },
     },
+    onChange: undefined,
   },
   render: (rowHeightsOptions) => (
     <StatefulDataGrid {...storyArgs} rowHeightsOptions={rowHeightsOptions} />
@@ -98,8 +113,22 @@ export const CustomLineHeight: Story = {
   parameters: { controls: { include: ['lineHeight'] } },
   args: {
     lineHeight: '40px',
+    onChange: undefined,
   },
   render: (rowHeightsOptions) => (
     <StatefulDataGrid {...storyArgs} rowHeightsOptions={rowHeightsOptions} />
   ),
 };
+
+// Visual regression test for https://github.com/elastic/eui/issues/7897
+// Control column checkboxes & buttons should vertically align with the first
+// line of text for both single and multiple lines of text
+export const CustomLineHeightControlColumn: Story = {
+  tags: ['vrt-only'],
+  render: () => (
+    <StatefulDataGrid
+      {...storyArgs}
+      rowHeightsOptions={{ lineHeight: '3', defaultHeight: { lineCount: 2 } }}
+    />
+  ),
+};
diff --git a/packages/eui/src/components/datagrid/data_grid_types.ts b/packages/eui/src/components/datagrid/data_grid_types.ts
index 64419e06d29..c454f9f5b86 100644
--- a/packages/eui/src/components/datagrid/data_grid_types.ts
+++ b/packages/eui/src/components/datagrid/data_grid_types.ts
@@ -639,6 +639,7 @@ export interface EuiDataGridCellProps {
   rowHeightUtils?: RowHeightUtilsType;
   rowManager?: EuiDataGridRowManager;
   pagination?: Required<EuiDataGridPaginationProps>;
+  gridStyles: EuiDataGridStyle;
 }
 
 export interface EuiDataGridCellState {
diff --git a/packages/eui/src/components/datagrid/utils/__mocks__/row_heights.ts b/packages/eui/src/components/datagrid/utils/__mocks__/row_heights.ts
index e06b4957d9d..2fef7caa05b 100644
--- a/packages/eui/src/components/datagrid/utils/__mocks__/row_heights.ts
+++ b/packages/eui/src/components/datagrid/utils/__mocks__/row_heights.ts
@@ -23,7 +23,6 @@ export const RowHeightUtils = jest.fn().mockImplementation(() => {
   const rowHeightUtils = new ActualRowHeightUtils();
 
   const rowHeightUtilsMock: RowHeightUtilsPublicAPI = {
-    cacheStyles: jest.fn(),
     getHeightType: jest.fn(rowHeightUtils.getHeightType),
     isAutoHeight: jest.fn(() => false),
     setRowHeight: jest.fn(),
diff --git a/packages/eui/src/components/datagrid/utils/row_heights.test.ts b/packages/eui/src/components/datagrid/utils/row_heights.test.ts
index 200e40e6762..988c71edc78 100644
--- a/packages/eui/src/components/datagrid/utils/row_heights.test.ts
+++ b/packages/eui/src/components/datagrid/utils/row_heights.test.ts
@@ -159,47 +159,6 @@ describe('RowHeightUtils', () => {
     });
   });
 
-  describe('styles utils', () => {
-    describe('cacheStyles', () => {
-      const mockCellPaddingsMap = {
-        s: '4px',
-        m: '6px',
-        l: '8px',
-      };
-
-      it('stores a styles instance variable based on the grid density', () => {
-        Object.entries(mockCellPaddingsMap).forEach(
-          ([densitySize, paddingStyle]) => {
-            const expectedPadding = parseFloat(paddingStyle);
-
-            rowHeightUtils.cacheStyles(
-              { cellPadding: densitySize as any },
-              mockCellPaddingsMap
-            );
-            // @ts-ignore this var is private, but we're inspecting it for the sake of the unit test
-            expect(rowHeightUtils.styles).toEqual({
-              paddingTop: expectedPadding,
-              paddingBottom: expectedPadding,
-            });
-          }
-        );
-      });
-
-      it('falls back to m-sized cellPadding if gridStyle.cellPadding is undefined', () => {
-        rowHeightUtils.cacheStyles(
-          { cellPadding: undefined },
-          mockCellPaddingsMap
-        );
-
-        // @ts-ignore this var is private, but we're inspecting it for the sake of the unit test
-        expect(rowHeightUtils.styles).toEqual({
-          paddingTop: 6,
-          paddingBottom: 6,
-        });
-      });
-    });
-  });
-
   describe('getHeightType', () => {
     it('returns a string enum based on rowHeightsOptions', () => {
       expect(rowHeightUtils.getHeightType(undefined)).toEqual('default');
@@ -207,14 +166,22 @@ describe('RowHeightUtils', () => {
       expect(rowHeightUtils.getHeightType({ lineCount: 3 })).toEqual(
         'lineCount'
       );
-      expect(rowHeightUtils.getHeightType({ lineCount: 0 })).toEqual(
-        'lineCount'
-      );
       expect(rowHeightUtils.getHeightType({ height: 100 })).toEqual(
         'numerical'
       );
       expect(rowHeightUtils.getHeightType(100)).toEqual('numerical');
     });
+
+    it("returns the default height type for lineCounts of 1, as they're functionally equivalent", () => {
+      expect(rowHeightUtils.getHeightType({ lineCount: 1 })).toEqual('default');
+    });
+
+    it('falls back to a default height type for invalid lineCounts', () => {
+      expect(rowHeightUtils.getHeightType({ lineCount: 0 })).toEqual('default');
+      expect(rowHeightUtils.getHeightType({ lineCount: -1 })).toEqual(
+        'default'
+      );
+    });
   });
 
   describe('lineCount utils', () => {
@@ -234,13 +201,14 @@ describe('RowHeightUtils', () => {
     describe('calculateHeightForLineCount', () => {
       let getComputedStyleSpy: jest.SpyInstance;
       const cell = document.createElement('div');
-      const mockCellPaddingsMap = { s: '', m: '6px', l: '' };
 
       beforeEach(() => {
-        rowHeightUtils.cacheStyles({ cellPadding: 'm' }, mockCellPaddingsMap);
         getComputedStyleSpy = jest
           .spyOn(window, 'getComputedStyle')
-          .mockReturnValue({ lineHeight: '24px' } as CSSStyleDeclaration);
+          .mockReturnValue({
+            lineHeight: '24px',
+            paddingTop: '6px',
+          } as CSSStyleDeclaration);
       });
 
       afterEach(() => {
@@ -254,20 +222,6 @@ describe('RowHeightUtils', () => {
           132
         ); // 5 * 24 + 6 + 6
       });
-
-      it('excludes padding calculations when the excludePadding flag is true', () => {
-        // This is primarily used for rowHeight lineCount overrides that use the height cache,
-        // which already has padding calculations built in
-        expect(
-          rowHeightUtils.calculateHeightForLineCount(cell, 1, true)
-        ).toEqual(24); // 1 * 24
-        expect(
-          rowHeightUtils.calculateHeightForLineCount(cell, 3, true)
-        ).toEqual(72); // 3 * 24
-        expect(
-          rowHeightUtils.calculateHeightForLineCount(cell, 5, true)
-        ).toEqual(120); // 5 * 24
-      });
     });
   });
 
@@ -649,23 +603,6 @@ describe('useRowHeightUtils', () => {
     expect(requestAnimationFrameSpy).toHaveBeenCalledTimes(3);
   });
 
-  it('updates internal cached styles whenever gridStyle.cellPadding changes', () => {
-    const { result, rerender } = renderHook(useRowHeightUtils, {
-      initialProps: mockArgs,
-    });
-
-    rerender({
-      ...mockArgs,
-      gridStyles: { ...startingStyles, cellPadding: 's' },
-    });
-
-    // @ts-ignore - intentionally inspecting private var for test
-    expect(result.current.styles).toEqual({
-      paddingTop: 4,
-      paddingBottom: 4,
-    });
-  });
-
   it('prunes columns from the row heights cache if a column is hidden', () => {
     const { result, rerender } = renderHook(useRowHeightUtils, {
       initialProps: mockArgs,
diff --git a/packages/eui/src/components/datagrid/utils/row_heights.ts b/packages/eui/src/components/datagrid/utils/row_heights.ts
index 6d898a0b98d..57f415e11e4 100644
--- a/packages/eui/src/components/datagrid/utils/row_heights.ts
+++ b/packages/eui/src/components/datagrid/utils/row_heights.ts
@@ -15,11 +15,7 @@ import {
   useState,
 } from 'react';
 import { GridOnItemsRenderedProps } from 'react-window';
-import {
-  useForceRender,
-  useLatest,
-  useEuiMemoizedStyles,
-} from '../../../services';
+import { useForceRender, useLatest } from '../../../services';
 import { isNumber, isObject } from '../../../services/predicate';
 import {
   EuiDataGridColumn,
@@ -29,7 +25,6 @@ import {
   EuiDataGridStyle,
   ImperativeGridApi,
 } from '../data_grid_types';
-import { euiDataGridVariables } from '../data_grid.styles';
 import { DataGridSortedContext } from './sorting';
 
 const AUTO_HEIGHT = 'auto';
@@ -84,31 +79,6 @@ export class RowHeightUtils {
     return defaultHeight;
   }
 
-  /**
-   * Styles utils
-   */
-
-  private styles: {
-    paddingTop: number;
-    paddingBottom: number;
-  } = {
-    paddingTop: 0,
-    paddingBottom: 0,
-  };
-
-  cacheStyles(
-    gridStyles: EuiDataGridStyle,
-    cellPaddingsMap: ReturnType<typeof euiDataGridVariables>['cellPadding']
-  ) {
-    const paddingSize = gridStyles.cellPadding ?? 'm';
-    const padding = parseFloat(cellPaddingsMap[paddingSize]);
-
-    this.styles = {
-      paddingTop: padding,
-      paddingBottom: padding,
-    };
-  }
-
   /**
    * Height types
    */
@@ -120,8 +90,9 @@ export class RowHeightUtils {
     if (option === AUTO_HEIGHT) {
       return 'auto';
     }
-    if (this.getLineCount(option) != null) {
-      return 'lineCount';
+    const lineCount = this.getLineCount(option);
+    if (lineCount != null) {
+      return lineCount > 1 ? 'lineCount' : 'default';
     }
     return 'numerical';
   };
@@ -134,18 +105,14 @@ export class RowHeightUtils {
     return isObject(option) ? option.lineCount : undefined;
   }
 
-  calculateHeightForLineCount(
-    cellRef: HTMLElement,
-    lineCount: number,
-    excludePadding?: boolean
-  ) {
+  calculateHeightForLineCount(cellRef: HTMLElement, lineCount: number) {
     const computedStyles = window.getComputedStyle(cellRef, null);
     const lineHeight = parseInt(computedStyles.lineHeight, 10);
     const contentHeight = Math.ceil(lineCount * lineHeight);
+    const padding = parseInt(computedStyles.paddingTop, 10);
 
-    return excludePadding
-      ? contentHeight
-      : contentHeight + this.styles.paddingTop + this.styles.paddingBottom;
+    // Assumes both padding-top and bottom are the same
+    return contentHeight + padding * 2;
   }
 
   /**
@@ -333,7 +300,6 @@ export class RowHeightVirtualizationUtils extends RowHeightUtils {
 export const useRowHeightUtils = ({
   virtualization,
   rowHeightsOptions,
-  gridStyles,
   columns,
 }: {
   virtualization?:
@@ -380,15 +346,6 @@ export const useRowHeightUtils = ({
     forceRenderRef,
   ]);
 
-  // Re-cache styles whenever grid density changes
-  const styleVars = useEuiMemoizedStyles(euiDataGridVariables);
-  useEffect(() => {
-    rowHeightUtils.cacheStyles(
-      { cellPadding: gridStyles.cellPadding },
-      styleVars.cellPadding
-    );
-  }, [gridStyles.cellPadding, rowHeightUtils, styleVars.cellPadding]);
-
   // Update row heights map to remove hidden columns whenever orderedVisibleColumns change
   useEffect(() => {
     rowHeightUtils.pruneHiddenColumnHeights(columns);