diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoverySplash.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoverySplash.tsx index cd31843f834..153d8c12931 100644 --- 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} /> @@ -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} /> @@ -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 index 92c1d1f5733..d25e356ad0d 100644 --- 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 {