From 1ecfb1becb9740f44531708dcad9eac5822cb6d4 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Sun, 5 Nov 2023 11:55:51 -0800
Subject: [PATCH] Allow cell popovers to expand to larger cell widths

- to match other screenshot Caroline posted - see the auto height datagrid demos
---
 src/components/datagrid/_data_grid_data_row.scss        | 4 ----
 src/components/datagrid/body/data_grid_cell_popover.tsx | 7 +++++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index fe829570f2e6..343bb29d766f 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -104,11 +104,7 @@
 .euiDataGridRowCell__popover {
   @include euiScrollBar;
   overflow: auto;
-  // stylelint-disable declaration-no-important
-  max-width: 400px !important;
-  max-height: 400px !important;
   z-index: $euiZDataGridCellPopover !important;
-  // stylelint-enable declaration-no-important
   // Workaround for a Safari CSS bug when using both `overflow: auto` & `filter: drop-shadow`
   // (see https://github.com/elastic/eui/issues/6151)
   // Disables the default EuiPopover filter drop-shadow and uses box-shadow instead,
diff --git a/src/components/datagrid/body/data_grid_cell_popover.tsx b/src/components/datagrid/body/data_grid_cell_popover.tsx
index 4333efdcb727..05d8e220e093 100644
--- a/src/components/datagrid/body/data_grid_cell_popover.tsx
+++ b/src/components/datagrid/body/data_grid_cell_popover.tsx
@@ -105,6 +105,7 @@ export const useCellPopover = (): {
       hasArrow={false}
       panelPaddingSize="s"
       anchorPosition={popoverAnchorPosition}
+      repositionToCrossAxis={false}
       {...cellPopoverProps}
       focusTrapProps={{
         // Include the cell actions DOM node as a shard - otherwise clicking
@@ -120,6 +121,12 @@ export const useCellPopover = (): {
         cellPopoverProps.panelClassName,
         cellPopoverProps.panelProps?.className
       )}
+      panelStyle={{
+        maxInlineSize: `min(75vw, max(${
+          popoverAnchor.parentElement!.offsetWidth
+        }px, 400px))`,
+        maxBlockSize: '50vh',
+      }}
       onKeyDown={(event) => {
         if (event.key === keys.F2 || event.key === keys.ESCAPE) {
           event.preventDefault();