[EuiDataGrid] Various row height fixes

packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -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

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;
+            }
+          }
+        }
+      `,
     },
   };
 };

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

packages/eui/src/components/datagrid/data_grid_row_heights.stories.tsx

@@ -117,3 +117,16 @@ export const CustomLineHeight: Story = {
     <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 } }}
+    />
+  ),
+};