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

Author: ncdiehl11

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,15 +369,15 @@ 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;
   overflow: ${OVERFLOW_HIDDEN};
   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
 `

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>