diff --git a/app/src/components/dataset/DatasetSelectWithSplits.tsx b/app/src/components/dataset/DatasetSelectWithSplits.tsx
index ea85b42d4d7..986c7821e86 100644
--- a/app/src/components/dataset/DatasetSelectWithSplits.tsx
+++ b/app/src/components/dataset/DatasetSelectWithSplits.tsx
@@ -154,20 +154,32 @@ 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>{selectedDataset.name}</Text>
-              {selectedSplits.length > 0 ? (
-                <Text color="text-300">
-                  &nbsp;/{" "}
-                  {selectedSplits.length === 1
-                    ? selectedSplits[0].name
-                    : `${selectedSplits.length} splits`}
-                </Text>
-              ) : (
-                <Text color="text-300">&nbsp;/ All Examples</Text>
-              )}
+              <Text>
+                <Truncate maxWidth="10rem">{selectedDataset.name}</Truncate>
+              </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">
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 907569d9bce..ef3133290af 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,38 @@ function EvaluatorConfigDialogContent({
   return (
     <>
       <DialogHeader>
-        <DialogTitle>
-          <Flex direction="row" alignItems="center" gap="size-50">
+        <DialogTitle
+          css={css`
+            overflow: hidden;
+          `}
+        >
+          <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 />} />
-              {evaluator.name}
+              <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 />} />
-              {dataset.name}
+              <Truncate maxWidth="100%">{dataset.name}</Truncate>
             </Flex>
           </Flex>
         </DialogTitle>