[EuiDataGrid] Fix open cell popovers causing auto height rows to bug out + misc cleanup

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 - Fixed `EuiDataGrid` to correctly remove the cell expansion action button when a column sets both `cellActions` and `isExpandable` to false ([#5592](https://github.com/elastic/eui/pull/5592))
 - Fixed `EuiDataGrid` re-playing the cell actions animation when hovering over an already-focused cell ([#5592](https://github.com/elastic/eui/pull/5592))
+- Fixed `EuiDataGrid` auto row heights bugging out when cell popovers are opened ([#5622](https://github.com/elastic/eui/pull/5622))
 
 **Breaking changes**
 

src/components/datagrid/_data_grid_data_row.scss

@@ -1,6 +1,4 @@
 .euiDataGridRow {
-  // needed for footer cells to correctly position
-  display: flex;
   background-color: $euiColorEmptyShade;
 }
 
@@ -10,16 +8,10 @@
   padding: $euiDataGridCellPaddingM;
   border-right: $euiDataGridVerticalBorder;
   border-bottom: $euiBorderThin;
-  flex: 0 0 auto;
-  position: relative;
-  align-items: center;
-  display: flex;
   overflow: hidden;
 
-  // Hack to allow for all the focus guard stuff
+  // Hack to allow focus trap to still stretch to full row height on defined heights
   > * {
-    max-width: 100%;
-    width: 100%;
     height: 100%;
   }
 
@@ -114,11 +106,6 @@
   z-index: $euiZDataGridCellPopover !important;
 }
 
-.euiDataGridRowCell__expand {
-  width: 100%;
-  max-width: 100%;
-}
-
 .euiDataGridRowCell__expandFlex {
   position: relative; // for positioning expand button
   display: flex;

src/components/datagrid/body/_data_grid_footer_row.scss

@@ -1,4 +1,10 @@
+.euiDataGridFooter {
+  display: flex;
+}
+
 @include euiDataGridFooterCell {
+  flex: 0 0 auto;
+  position: relative;
   font-weight: $euiFontWeightBold;
 }
 

src/components/datagrid/body/data_grid_cell.tsx

@@ -616,7 +616,6 @@ export class EuiDataGridCell extends Component<
         onDeactivation={() => {
           this.setState({ isEntered: false }, this.preventTabbing);
         }}
-        style={isDefinedHeight ? { height: '100%' } : {}}
         clickOutsideDisables={true}
       >
         <div className={anchorClass} ref={this.popoverAnchorRef}>
@@ -628,12 +627,12 @@ export class EuiDataGridCell extends Component<
     );
 
     if (hasCellActions) {
-      if (showCellActions) {
-        innerContent = (
-          <div className={anchorClass} ref={this.popoverAnchorRef}>
-            <div className={expandClass}>
-              <EuiDataGridCellContent {...cellContentProps} />
-            </div>
+      innerContent = (
+        <div className={anchorClass} ref={this.popoverAnchorRef}>
+          <div className={expandClass}>
+            <EuiDataGridCellContent {...cellContentProps} />
+          </div>
+          {showCellActions && (
             <EuiDataGridCellActions
               rowIndex={rowIndex}
               colIndex={colIndex}
@@ -648,17 +647,9 @@ export class EuiDataGridCell extends Component<
                 }
               }}
             />
-          </div>
-        );
-      } else {
-        innerContent = (
-          <div className={anchorClass} ref={this.popoverAnchorRef}>
-            <div className={expandClass}>
-              <EuiDataGridCellContent {...cellContentProps} />
-            </div>
-          </div>
-        );
-      }
+          )}
+        </div>
+      );
     }
 
     const content = (

src/components/datagrid/body/data_grid_cell_popover.test.tsx

@@ -95,7 +95,6 @@ describe('useCellPopover', () => {
       populateCellPopover(cellPopoverContext);
       expect(getUpdatedState().cellPopover).toMatchInlineSnapshot(`
         <EuiWrappingPopover
-          anchorClassName="euiDataGridRowCell__expand"
           button={<div />}
           closePopover={[Function]}
           display="block"

src/components/datagrid/body/data_grid_cell_popover.tsx

@@ -71,7 +71,6 @@ export const useCellPopover = (): {
   const cellPopover = popoverIsOpen && popoverAnchor && (
     <EuiWrappingPopover
       hasArrow={false}
-      anchorClassName="euiDataGridRowCell__expand"
       button={popoverAnchor}
       isOpen={popoverIsOpen}
       panelClassName="euiDataGridRowCell__popover"