From 24617238cdc741464597cd72ea534a8d22b98ded Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Tue, 3 Sep 2024 10:04:19 -0400
Subject: [PATCH] fix(app): fix csv filename wrapping (#16156)

Wrap long CSV file names in `ChooseCsvFile` component to maintain style
of selection screen

Closes RQA-3003
---
 app/src/atoms/buttons/RadioButton.tsx               |  1 +
 .../ProtocolSetupParameters/ChooseCsvFile.tsx       |  2 +-
 app/src/pages/ProtocolSetup/index.tsx               | 13 ++++++++++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/src/atoms/buttons/RadioButton.tsx b/app/src/atoms/buttons/RadioButton.tsx
index 45cfdce8697..535a9807392 100644
--- a/app/src/atoms/buttons/RadioButton.tsx
+++ b/app/src/atoms/buttons/RadioButton.tsx
@@ -82,6 +82,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
         display: ${maxLines != null ? '-webkit-box' : undefined};
         -webkit-line-clamp: ${maxLines ?? undefined};
         -webkit-box-orient: ${maxLines != null ? 'vertical' : undefined};
+        word-wrap: break-word;
       }
     }
   `
diff --git a/app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx b/app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx
index 7cdeb6a9a8d..f80bc671552 100644
--- a/app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx
+++ b/app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx
@@ -29,7 +29,7 @@ import type {
 import type { CsvFileData } from '@opentrons/api-client'
 
 const MAX_CHARS = 52
-const CSV_FILENAME_BREAK_POINT = 46
+const CSV_FILENAME_BREAK_POINT = 42
 interface ChooseCsvFileProps {
   protocolId: string
   handleGoBack: () => void
diff --git a/app/src/pages/ProtocolSetup/index.tsx b/app/src/pages/ProtocolSetup/index.tsx
index 52eb4f8f8c9..c9c79926356 100644
--- a/app/src/pages/ProtocolSetup/index.tsx
+++ b/app/src/pages/ProtocolSetup/index.tsx
@@ -17,10 +17,11 @@ import {
   Icon,
   JUSTIFY_END,
   JUSTIFY_SPACE_BETWEEN,
+  LegacyStyledText,
+  NO_WRAP,
   OVERFLOW_WRAP_ANYWHERE,
   POSITION_STICKY,
   SPACING,
-  LegacyStyledText,
   TEXT_ALIGN_RIGHT,
   truncateString,
   TYPOGRAPHY,
@@ -115,6 +116,8 @@ interface ProtocolSetupStepProps {
   title: string
   // first line of detail text
   detail?: string | null
+  // clip detail text overflow with ellipsis
+  clipDetail?: boolean
   // second line of detail text
   subDetail?: string | null
   // disallow click handler, disabled styling
@@ -140,6 +143,7 @@ export function ProtocolSetupStep({
   detail,
   subDetail,
   disabled = false,
+  clipDetail = false,
   interactionDisabled = false,
   disabledReason,
   description,
@@ -250,6 +254,7 @@ export function ProtocolSetupStep({
             textAlign={TEXT_ALIGN_RIGHT}
             color={interactionDisabled ? COLORS.grey50 : COLORS.black90}
             maxWidth="20rem"
+            css={clipDetail ? CLIPPED_TEXT_STYLE : undefined}
           >
             {detail}
             {subDetail != null && detail != null ? <br /> : null}
@@ -1075,3 +1080,9 @@ export function ProtocolSetup(): JSX.Element {
     </>
   )
 }
+
+const CLIPPED_TEXT_STYLE = css`
+  white-space: ${NO_WRAP};
+  overflow: hidden;
+  text-overflow: ellipsis;
+`