fix(app): fix failed error details modal styling and long protocol me…

… display issue (#13133) * fix(app): fix failed error details modal styling and long protocol name display
Opentrons · Jul 21, 2023 · 159ec95 · 159ec95
1 parent e1da55c
commit 159ec95
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 5 deletions.
diff --git a/app/src/App/OnDeviceDisplayAppFallback.tsx b/app/src/App/OnDeviceDisplayAppFallback.tsx
@@ -39,7 +39,7 @@ export function OnDeviceDisplayAppFallback({
   const modalHeader: ModalHeaderBaseProps = {
     title: t('error_boundary_title'),
     iconName: 'information',
-    iconColor: COLORS.white,
+    iconColor: COLORS.red2,
   }
 
   // immediately report to robot logs that something fatal happened
@@ -50,7 +50,6 @@ export function OnDeviceDisplayAppFallback({
   return (
     <Modal header={modalHeader}>
       <Flex
-        marginTop={SPACING.spacing32}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing32}
         alignItems={ALIGN_CENTER}

diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx
@@ -56,7 +56,7 @@ const TITLE_TEXT_STYLE = css`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   height: max-content;
 `
 

diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx
@@ -81,6 +81,7 @@ export function RunFailedModal({
             })}
           </StyledText>
           <Flex
+            width="100%"
             flexDirection={DIRECTION_COLUMN}
             gridGap={SPACING.spacing8}
             maxHeight="11rem"

diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunningProtocolCommandList.tsx
@@ -44,7 +44,7 @@ const TITLE_TEXT_STYLE = css`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   height: max-content;
 `
 

diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
@@ -392,6 +392,7 @@ export function ProtocolDetails(
               css={TYPOGRAPHY.h2SemiBold}
               marginBottom={SPACING.spacing16}
               data-testid={`ProtocolDetails_${protocolDisplayName}`}
+              overflowWrap="anywhere"
             >
               {protocolDisplayName}
             </StyledText>

diff --git a/app/src/pages/OnDeviceDisplay/RunSummary.tsx b/app/src/pages/OnDeviceDisplay/RunSummary.tsx
@@ -330,7 +330,7 @@ const ProtocolName = styled.h4`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   height: max-content;
 `