fix(app): various odd modal width fixes under i18n

- the takeover modal for maintenance runs (RQA-3868) - run start confirmation (not tagged yet) - run cancel confirmation (RQA-3869) Closes RQA-3868 Closes RQA-3869
Opentrons · Jan 17, 2025 · f4d5d51 · f4d5d51
1 parent bb78046
commit f4d5d51
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/app/src/organisms/ODD/RunningProtocol/ConfirmCancelRunModal.tsx b/app/src/organisms/ODD/RunningProtocol/ConfirmCancelRunModal.tsx
@@ -112,7 +112,7 @@ export function ConfirmCancelRunModal({
         setShowConfirmCancelRunModal(false)
       }}
     >
-      <Flex flexDirection={DIRECTION_COLUMN}>
+      <Flex flexDirection={DIRECTION_COLUMN} width="100%">
         <Flex
           flexDirection={DIRECTION_COLUMN}
           gridGap={SPACING.spacing12}

diff --git a/app/src/organisms/TakeoverModal/TakeoverModal.tsx b/app/src/organisms/TakeoverModal/TakeoverModal.tsx
@@ -48,7 +48,7 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element {
     showConfirmTerminateModal ? (
       //    confirm terminate modal
       <OddModal header={terminateHeader}>
-        <Flex flexDirection={DIRECTION_COLUMN}>
+        <Flex flexDirection={DIRECTION_COLUMN} width="100%">
           <LegacyStyledText as="p" marginBottom={SPACING.spacing32}>
             {t('branded:confirm_terminate')}
           </LegacyStyledText>
@@ -79,6 +79,7 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element {
           gridGap={SPACING.spacing40}
           alignItems={ALIGN_CENTER}
           justifyContent={ALIGN_CENTER}
+          width="100%"
         >
           <Flex
             height="12.5rem"
@@ -88,6 +89,7 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element {
             color={COLORS.grey60}
             padding={SPACING.spacing24}
             alignItems={ALIGN_CENTER}
+            width="100%"
           >
             <Icon
               name="ot-alert"

diff --git a/app/src/pages/ODD/ProtocolSetup/ConfirmSetupStepsCompleteModal.tsx b/app/src/pages/ODD/ProtocolSetup/ConfirmSetupStepsCompleteModal.tsx
@@ -36,7 +36,11 @@ export function ConfirmSetupStepsCompleteModal({
 
   return (
     <OddModal header={modalHeader} onOutsideClick={onCloseClick}>
-      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing32}
+        width="100%"
+      >
         <LegacyStyledText as="p">
           {t('you_havent_confirmed', {
             missingSteps: new Intl.ListFormat('en', {