fix(app): Properly truncate ODD command text (#17003)

Opentrons · Dec 2, 2024 · 690fcc3 · 690fcc3
1 parent 89834d5
commit 690fcc3
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoverySplash.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoverySplash.tsx
@@ -6,6 +6,7 @@ import {
   ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
+  RESPONSIVENESS,
   DISPLAY_FLEX,
   Flex,
   Icon,
@@ -200,6 +201,7 @@ export function RecoverySplash(props: RecoverySplashProps): JSX.Element | null {
               overflowWrap={OVERFLOW_WRAP_BREAK_WORD}
               color={COLORS.white}
               textAlign={TEXT_ALIGN_CENTER}
+              css={TEXT_TRUNCATION_STYLE}
             />
           </Flex>
         </SplashFrame>
@@ -253,6 +255,7 @@ export function RecoverySplash(props: RecoverySplashProps): JSX.Element | null {
                 overflow="hidden"
                 overflowWrap={OVERFLOW_WRAP_BREAK_WORD}
                 textAlign={TEXT_ALIGN_CENTER}
+                css={TEXT_TRUNCATION_STYLE}
               />
             </Flex>
           </Flex>
@@ -301,6 +304,18 @@ const SplashFrame = styled(Flex)`
   padding-bottom: 0px;
 `
 
+const TEXT_TRUNCATION_STYLE = css`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    font-size: ${TYPOGRAPHY.fontSize22};
+  }
+`
+
 const SHARED_BUTTON_STYLE_ODD = css`
   width: 29rem;
   height: 13.5rem;

diff --git a/app/src/organisms/ODD/RunningProtocol/CurrentRunningProtocolCommand.tsx b/app/src/organisms/ODD/RunningProtocol/CurrentRunningProtocolCommand.tsx
@@ -75,32 +75,31 @@ const RUN_TIMER_STYLE = css`
   color: ${COLORS.black90};
 `
 
-const COMMAND_ROW_STYLE_ANIMATED = css`
+const COMMAND_ROW_STYLE_BASE = css`
   font-size: 1.375rem;
   line-height: 1.75rem;
   font-weight: ${TYPOGRAPHY.fontWeightRegular};
   text-align: center;
-  width: fit-content;
+  width: 100%;
+  max-width: 100%;
   margin: auto;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
+  max-height: 4.6rem; // This ensures we don't show any extra text after truncating.
+  word-break: break-word;
+  white-space: normal;
+`
+
+const COMMAND_ROW_STYLE_ANIMATED = css`
+  ${COMMAND_ROW_STYLE_BASE}
   animation: ${fadeIn} 1.5s ease-in-out;
   ${ODD_ANIMATION_OPTIMIZATIONS}
 `
 
 const COMMAND_ROW_STYLE = css`
-  font-size: 1.375rem;
-  line-height: 1.75rem;
-  font-weight: ${TYPOGRAPHY.fontWeightRegular};
-  text-align: center;
-  width: fit-content;
-  margin: auto;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
+  ${COMMAND_ROW_STYLE_BASE}
 `
 
 interface RunTimerInfo {