From 2294fa780c0d20129f2bf78bc0530a64f97f2ddf Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Thu, 6 Feb 2025 16:39:02 -0500
Subject: [PATCH] fix(components,-protocol-designer): fix word break in
 dropdown menu

This PR fixes word break style for dropdown menu-- should break at word.

Closes RQA-3950
---
 components/src/molecules/DropdownMenu/index.tsx             | 6 +++---
 .../src/molecules/DropdownStepFormField/index.tsx           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
index 3a367dcf2e4..41517f39a22 100644
--- a/components/src/molecules/DropdownMenu/index.tsx
+++ b/components/src/molecules/DropdownMenu/index.tsx
@@ -330,7 +330,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                     >
                       <StyledText
                         desktopStyle="captionRegular"
-                        css={LINE_CLAMP_TEXT_STYLE(3)}
+                        css={LINE_CLAMP_TEXT_STYLE(3, true)}
                       >
                         {option.name}
                       </StyledText>
@@ -369,7 +369,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
 
 export const LINE_CLAMP_TEXT_STYLE = (
   lineClamp?: number,
-  title?: boolean
+  wordBreak?: boolean
 ): FlattenSimpleInterpolation => css`
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -377,7 +377,7 @@ export const LINE_CLAMP_TEXT_STYLE = (
   text-overflow: ellipsis;
   word-wrap: break-word;
   -webkit-line-clamp: ${lineClamp ?? 1};
-  word-break: ${title === true
+  word-break: ${wordBreak === true
     ? 'normal'
     : 'break-all'}; // normal for tile and break-all for a non word case like aaaaaaaa
 `
diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
index ac6bac171a3..54e79b0e520 100644
--- a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -125,7 +125,7 @@ export function DropdownStepFormField(
               >
                 <StyledText
                   desktopStyle="captionRegular"
-                  css={LINE_CLAMP_TEXT_STYLE(3)}
+                  css={LINE_CLAMP_TEXT_STYLE(3, true)}
                 >
                   {options[0].name}
                 </StyledText>