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

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

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();