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

- 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 <img width="1046" alt="Screenshot 2025-01-17 at 4 58 05 PM" src="https://github.com/user-attachments/assets/66d00f4a-5e49-4f34-8049-ae74051f710e" /> <img width="1037" alt="Screenshot 2025-01-17 at 4 58 40 PM" src="https://github.com/user-attachments/assets/b39ef8b7-77aa-4cfe-8452-e447e439460b" /> <img width="1035" alt="Screenshot 2025-01-17 at 5 05 22 PM" src="https://github.com/user-attachments/assets/ffb47a09-0f02-4b26-b4e4-54fa43d7865c" />
Opentrons · Jan 22, 2025 · 1e47fe3 · 1e47fe3
1 parent 4940eb7
commit 1e47fe3
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', {