From e25d3daecd658cc6423dd4ec61a7c91997e2b9ee Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 11 Mar 2024 10:45:21 -0700
Subject: [PATCH 1/3] [REVERT ME] bug repro

---
 .../src/views/datagrid/basics/datagrid.js     | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/datagrid/basics/datagrid.js b/src-docs/src/views/datagrid/basics/datagrid.js
index 93e6d063f07..3415d7c4806 100644
--- a/src-docs/src/views/datagrid/basics/datagrid.js
+++ b/src-docs/src/views/datagrid/basics/datagrid.js
@@ -84,7 +84,7 @@ const RenderCellValue = ({ rowIndex, columnId, setCellProps }) => {
   }, [rowIndex, columnId, setCellProps, data]);
 
   function getFormatted() {
-    return data[rowIndex][columnId].formatted
+    return data[rowIndex][columnId]?.formatted
       ? data[rowIndex][columnId].formatted
       : data[rowIndex][columnId];
   }
@@ -210,6 +210,25 @@ const columns = [
     isResizable: false,
     actions: false,
   },
+  {
+    id: 'test',
+    displayAsText: 'Long long long field name',
+  },
+  {
+    id: 'test1',
+  },
+  {
+    id: 'test2',
+  },
+  {
+    id: 'test3',
+  },
+  {
+    id: 'test4',
+  },
+  {
+    id: 'test5',
+  },
 ];
 
 const trailingControlColumns = [

From 5b6cc5e32fe67c88c1940b32d816eb572d6c1847 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 11 Mar 2024 10:48:52 -0700
Subject: [PATCH 2/3] Fix CSS bug caused by bizarre scrollbar/width shenanigans

---
 .../controls/_data_grid_column_sorting.scss         | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/datagrid/controls/_data_grid_column_sorting.scss b/src/components/datagrid/controls/_data_grid_column_sorting.scss
index d86f88b90c0..f01864b4564 100644
--- a/src/components/datagrid/controls/_data_grid_column_sorting.scss
+++ b/src/components/datagrid/controls/_data_grid_column_sorting.scss
@@ -10,14 +10,27 @@
   padding-top: $euiSizeXS;
   padding-bottom: $euiSizeXS;
   max-height: 300px;
+
+  // Workaround for scrollbar clipping into text longer than the popover min width
+  @supports (scrollbar-gutter: stable) {
+    scrollbar-gutter: stable;
+  }
+  @supports not (scrollbar-gutter: stable) {
+    padding-right: 10px; // Safari :|
+  }
 }
 
 .euiDataGridColumnSorting__field {
   @include euiInteractiveStates;
+  @include euiTextTruncate;
   display: block;
   padding: $euiSizeXS $euiSizeS;
   width: 100%;
   outline-offset: -$euiFocusRingSize;
+
+  @supports not (scrollbar-gutter: stable) {
+    min-width: fit-content;
+  }
 }
 
 .euiDataGridColumnSorting__name {

From 2f25f9222e9ecbf38436c630f6b3e325ce72131e Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 11 Mar 2024 10:53:06 -0700
Subject: [PATCH 3/3] [misc cleanup] remove unnecessary flex wrappers

- in favor of a few extra lines of CSS
---
 .../controls/_data_grid_column_sorting.scss   |  4 +-
 .../datagrid/controls/column_sorting.tsx      | 51 +++++++------------
 2 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/src/components/datagrid/controls/_data_grid_column_sorting.scss b/src/components/datagrid/controls/_data_grid_column_sorting.scss
index f01864b4564..0e651d86bbc 100644
--- a/src/components/datagrid/controls/_data_grid_column_sorting.scss
+++ b/src/components/datagrid/controls/_data_grid_column_sorting.scss
@@ -23,7 +23,9 @@
 .euiDataGridColumnSorting__field {
   @include euiInteractiveStates;
   @include euiTextTruncate;
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: $euiSizeS;
   padding: $euiSizeXS $euiSizeS;
   width: 100%;
   outline-offset: -$euiFocusRingSize;
diff --git a/src/components/datagrid/controls/column_sorting.tsx b/src/components/datagrid/controls/column_sorting.tsx
index e2beb1845cb..bb42f21afb9 100644
--- a/src/components/datagrid/controls/column_sorting.tsx
+++ b/src/components/datagrid/controls/column_sorting.tsx
@@ -236,38 +236,25 @@ export const useDataGridColumnSorting = (
                                   sorting.onSort(nextColumns);
                                 }}
                               >
-                                <EuiFlexGroup
-                                  alignItems="center"
-                                  gutterSize="s"
-                                  component="span"
-                                  responsive={false}
-                                >
-                                  <EuiFlexItem grow={false}>
-                                    <EuiToken
-                                      iconType={
-                                        schemaDetails(id) != null
-                                          ? getDetailsForSchema(
-                                              schemaDetectors,
-                                              schema[id].columnType
-                                            ).icon
-                                          : 'tokenString'
-                                      }
-                                      color={
-                                        schemaDetails(id) != null
-                                          ? getDetailsForSchema(
-                                              schemaDetectors,
-                                              schema[id].columnType
-                                            ).color
-                                          : undefined
-                                      }
-                                    />
-                                  </EuiFlexItem>
-                                  <EuiFlexItem grow={false}>
-                                    <EuiText size="xs">
-                                      {displayValues[id]}
-                                    </EuiText>
-                                  </EuiFlexItem>
-                                </EuiFlexGroup>
+                                <EuiToken
+                                  iconType={
+                                    schemaDetails(id) != null
+                                      ? getDetailsForSchema(
+                                          schemaDetectors,
+                                          schema[id].columnType
+                                        ).icon
+                                      : 'tokenString'
+                                  }
+                                  color={
+                                    schemaDetails(id) != null
+                                      ? getDetailsForSchema(
+                                          schemaDetectors,
+                                          schema[id].columnType
+                                        ).color
+                                      : undefined
+                                  }
+                                />
+                                <EuiText size="xs">{displayValues[id]}</EuiText>
                               </button>
                             );
                           }