From 7a829df6a823d0addea0f8eb9d7403245332db55 Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Wed, 28 Aug 2024 17:34:51 -0400
Subject: [PATCH 1/4] fix(app): fix csv filename wrapping

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

Closes RQA-3003
---
 app/src/atoms/buttons/RadioButton.tsx                       | 1 +
 app/src/organisms/ProtocolSetupParameters/ChooseCsvFile.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

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

From e11d98796dfa65e4be181117c01af6367b4ca111 Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Thu, 29 Aug 2024 10:03:14 -0400
Subject: [PATCH 2/4] fix formatting in unrelated file

---
 app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
index 4512c879a7d..7bb9a73e105 100644
--- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
+++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx
@@ -37,7 +37,9 @@ export function NumericalKeyboard({
     <Keyboard
       keyboardRef={r => (keyboardRef.current = r)}
       theme={'hg-theme-default oddTheme1 numerical-keyboard'}
-      onInit={keyboard => {keyboard.setInput(initialValue)}}
+      onInit={keyboard => {
+        keyboard.setInput(initialValue)
+      }}
       onChange={onChange}
       display={numericalCustom}
       useButtonTag={true}

From 2af2e5b0f484c16f2cbe7468e5d9237feb374f9a Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Thu, 29 Aug 2024 12:01:07 -0400
Subject: [PATCH 3/4] setup button style

---
 app/src/pages/ProtocolSetup/index.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/src/pages/ProtocolSetup/index.tsx b/app/src/pages/ProtocolSetup/index.tsx
index 52eb4f8f8c9..2ffd26ae3ea 100644
--- a/app/src/pages/ProtocolSetup/index.tsx
+++ b/app/src/pages/ProtocolSetup/index.tsx
@@ -115,6 +115,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 +142,7 @@ export function ProtocolSetupStep({
   detail,
   subDetail,
   disabled = false,
+  clipDetail = false,
   interactionDisabled = false,
   disabledReason,
   description,
@@ -250,6 +253,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 +1079,9 @@ export function ProtocolSetup(): JSX.Element {
     </>
   )
 }
+
+const CLIPPED_TEXT_STYLE = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`

From be75996b0872dfd5a5b966c7901bbd7cdd246ef9 Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Tue, 3 Sep 2024 09:41:21 -0400
Subject: [PATCH 4/4] use constant

---
 app/src/pages/ProtocolSetup/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/src/pages/ProtocolSetup/index.tsx b/app/src/pages/ProtocolSetup/index.tsx
index 2ffd26ae3ea..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,
@@ -1081,7 +1082,7 @@ export function ProtocolSetup(): JSX.Element {
 }
 
 const CLIPPED_TEXT_STYLE = css`
-  white-space: nowrap;
+  white-space: ${NO_WRAP};
   overflow: hidden;
   text-overflow: ellipsis;
 `