From 8389fecaa7b0f9e2d984bbc3378f8af247d29dc9 Mon Sep 17 00:00:00 2001
From: Yasmine Frigui <yfrigui@arize.com>
Date: Fri, 21 Nov 2025 11:17:26 -0500
Subject: [PATCH 1/4] fix evaluator config dialog header overflow

---
 .../dataset/evaluators/EvaluatorConfigDialog.tsx      | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/src/pages/dataset/evaluators/EvaluatorConfigDialog.tsx b/app/src/pages/dataset/evaluators/EvaluatorConfigDialog.tsx
index 907569d9bce..584f00c91a8 100644
--- a/app/src/pages/dataset/evaluators/EvaluatorConfigDialog.tsx
+++ b/app/src/pages/dataset/evaluators/EvaluatorConfigDialog.tsx
@@ -29,6 +29,7 @@ import { EvaluatorExampleDataset } from "@phoenix/components/evaluators/Evaluato
 import { EvaluatorFormValues } from "@phoenix/components/evaluators/EvaluatorForm";
 import { EvaluatorInputMapping } from "@phoenix/components/evaluators/EvaluatorInputMapping";
 import { PromptChatMessages } from "@phoenix/components/prompt/PromptChatMessagesCard";
+import { Truncate } from "@phoenix/components/utility/Truncate";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 import { EvaluatorConfigDialog_dataset$key } from "@phoenix/pages/dataset/evaluators/__generated__/EvaluatorConfigDialog_dataset.graphql";
 import {
@@ -241,17 +242,21 @@ function EvaluatorConfigDialogContent({
   return (
     <>
       <DialogHeader>
-        <DialogTitle>
+        <DialogTitle
+          css={css`
+            overflow: hidden;
+          `}
+        >
           <Flex direction="row" alignItems="center" gap="size-50">
             Add
             <Flex direction="row" alignItems="center" gap="size-25">
               <Icon svg={<Icons.Scale />} />
-              {evaluator.name}
+              <Truncate maxWidth="18rem">{evaluator.name}</Truncate>
             </Flex>
             to
             <Flex direction="row" alignItems="center" gap="size-25">
               <Icon svg={<Icons.DatabaseOutline />} />
-              {dataset.name}
+              <Truncate maxWidth="18rem">{dataset.name}</Truncate>
             </Flex>
           </Flex>
         </DialogTitle>

From a22397661885a19dcf94e36bfc13e3a305b9234d Mon Sep 17 00:00:00 2001
From: Yasmine Frigui <yfrigui@arize.com>
Date: Fri, 21 Nov 2025 11:17:41 -0500
Subject: [PATCH 2/4] fix dataset select overflow

---
 .../dataset/DatasetSelectWithSplits.tsx          | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/src/components/dataset/DatasetSelectWithSplits.tsx b/app/src/components/dataset/DatasetSelectWithSplits.tsx
index ea85b42d4d7..14f75808a28 100644
--- a/app/src/components/dataset/DatasetSelectWithSplits.tsx
+++ b/app/src/components/dataset/DatasetSelectWithSplits.tsx
@@ -157,13 +157,17 @@ export function DatasetSelectWithSplits(props: DatasetSelectWithSplitsProps) {
         <Flex alignItems="center" width="100%">
           {selectedDataset ? (
             <>
-              <Text>{selectedDataset.name}</Text>
+              <Text>
+                <Truncate maxWidth="10rem">{selectedDataset.name}</Truncate>
+              </Text>
               {selectedSplits.length > 0 ? (
-                <Text color="text-300">
-                  &nbsp;/{" "}
-                  {selectedSplits.length === 1
-                    ? selectedSplits[0].name
-                    : `${selectedSplits.length} splits`}
+                <Text color="text-300" minWidth={0}>
+                  <Truncate maxWidth="100%">
+                    &nbsp;/&nbsp;
+                    {selectedSplits.length === 1
+                      ? selectedSplits[0].name
+                      : `${selectedSplits.length} splits`}
+                  </Truncate>
                 </Text>
               ) : (
                 <Text color="text-300">&nbsp;/ All Examples</Text>

From 9d4d6322e7c8125ecc8d2f3b940b2986944b9a06 Mon Sep 17 00:00:00 2001
From: Yasmine Frigui <yfrigui@arize.com>
Date: Mon, 24 Nov 2025 10:21:44 -0500
Subject: [PATCH 3/4] styling

---
 .../dataset/DatasetSelectWithSplits.tsx       |  8 +++++-
 app/src/components/dialog/Dialog.tsx          |  7 ++++-
 .../evaluators/EvaluatorConfigDialog.tsx      | 27 +++++++++++++++----
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/app/src/components/dataset/DatasetSelectWithSplits.tsx b/app/src/components/dataset/DatasetSelectWithSplits.tsx
index 14f75808a28..9a740823a8d 100644
--- a/app/src/components/dataset/DatasetSelectWithSplits.tsx
+++ b/app/src/components/dataset/DatasetSelectWithSplits.tsx
@@ -154,7 +154,13 @@ export function DatasetSelectWithSplits(props: DatasetSelectWithSplitsProps) {
         size={props.size ?? "S"}
         isDisabled={props.isDisabled}
       >
-        <Flex alignItems="center" width="100%">
+        <Flex
+          alignItems="center"
+          width="100%"
+          css={css`
+            overflow: hidden;
+          `}
+        >
           {selectedDataset ? (
             <>
               <Text>
diff --git a/app/src/components/dialog/Dialog.tsx b/app/src/components/dialog/Dialog.tsx
index 5358d037199..9aaf8c93c44 100644
--- a/app/src/components/dialog/Dialog.tsx
+++ b/app/src/components/dialog/Dialog.tsx
@@ -63,7 +63,12 @@ export const DialogHeader = ({ children, ...props }: DialogHeaderProps) => {
       css={dialogHeaderCSS}
       className={classNames(props.className, "ac-DialogHeader")}
     >
-      <Flex width="100%" justifyContent="space-between" alignItems="center">
+      <Flex
+        width="100%"
+        justifyContent="space-between"
+        alignItems="center"
+        gap="size-200"
+      >
         {children}
       </Flex>
     </div>
diff --git a/app/src/pages/dataset/evaluators/EvaluatorConfigDialog.tsx b/app/src/pages/dataset/evaluators/EvaluatorConfigDialog.tsx
index 584f00c91a8..ef3133290af 100644
--- a/app/src/pages/dataset/evaluators/EvaluatorConfigDialog.tsx
+++ b/app/src/pages/dataset/evaluators/EvaluatorConfigDialog.tsx
@@ -247,16 +247,33 @@ function EvaluatorConfigDialogContent({
             overflow: hidden;
           `}
         >
-          <Flex direction="row" alignItems="center" gap="size-50">
+          <Flex
+            direction="row"
+            alignItems="center"
+            gap="size-50"
+            maxWidth="100%"
+          >
             Add
-            <Flex direction="row" alignItems="center" gap="size-25">
+            <Flex
+              direction="row"
+              alignItems="center"
+              gap="size-25"
+              flexBasis="100%"
+              minWidth={0}
+            >
               <Icon svg={<Icons.Scale />} />
-              <Truncate maxWidth="18rem">{evaluator.name}</Truncate>
+              <Truncate maxWidth="100%">{evaluator.name}</Truncate>
             </Flex>
             to
-            <Flex direction="row" alignItems="center" gap="size-25">
+            <Flex
+              direction="row"
+              alignItems="center"
+              gap="size-25"
+              flexBasis="100%"
+              minWidth={0}
+            >
               <Icon svg={<Icons.DatabaseOutline />} />
-              <Truncate maxWidth="18rem">{dataset.name}</Truncate>
+              <Truncate maxWidth="100%">{dataset.name}</Truncate>
             </Flex>
           </Flex>
         </DialogTitle>

From cb1b64e9f1bdfa5d2e004a091a7cd2d4b6ef1f2d Mon Sep 17 00:00:00 2001
From: Yasmine Frigui <yfrigui@arize.com>
Date: Mon, 24 Nov 2025 10:31:20 -0500
Subject: [PATCH 4/4] dataset select styling

---
 .../dataset/DatasetSelectWithSplits.tsx       | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/app/src/components/dataset/DatasetSelectWithSplits.tsx b/app/src/components/dataset/DatasetSelectWithSplits.tsx
index 9a740823a8d..986c7821e86 100644
--- a/app/src/components/dataset/DatasetSelectWithSplits.tsx
+++ b/app/src/components/dataset/DatasetSelectWithSplits.tsx
@@ -166,18 +166,20 @@ export function DatasetSelectWithSplits(props: DatasetSelectWithSplitsProps) {
               <Text>
                 <Truncate maxWidth="10rem">{selectedDataset.name}</Truncate>
               </Text>
-              {selectedSplits.length > 0 ? (
-                <Text color="text-300" minWidth={0}>
-                  <Truncate maxWidth="100%">
-                    &nbsp;/&nbsp;
-                    {selectedSplits.length === 1
-                      ? selectedSplits[0].name
-                      : `${selectedSplits.length} splits`}
-                  </Truncate>
-                </Text>
-              ) : (
-                <Text color="text-300">&nbsp;/ All Examples</Text>
-              )}
+              <Text color="text-300" minWidth={0}>
+                <Truncate maxWidth="100%">
+                  {selectedSplits.length > 0 ? (
+                    <>
+                      &nbsp;/&nbsp;
+                      {selectedSplits.length === 1
+                        ? selectedSplits[0].name
+                        : `${selectedSplits.length} splits`}
+                    </>
+                  ) : (
+                    <>&nbsp;/ All Examples</>
+                  )}
+                </Truncate>
+              </Text>
             </>
           ) : (
             <Text color="text-300">