From f4d5d5176c7f359c48fc62fc88ca5e306090fcef Mon Sep 17 00:00:00 2001
From: Seth Foster <seth@opentrons.com>
Date: Fri, 17 Jan 2025 17:05:25 -0500
Subject: [PATCH] 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
---
 .../organisms/ODD/RunningProtocol/ConfirmCancelRunModal.tsx | 2 +-
 app/src/organisms/TakeoverModal/TakeoverModal.tsx           | 4 +++-
 .../ODD/ProtocolSetup/ConfirmSetupStepsCompleteModal.tsx    | 6 +++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/src/organisms/ODD/RunningProtocol/ConfirmCancelRunModal.tsx b/app/src/organisms/ODD/RunningProtocol/ConfirmCancelRunModal.tsx
index 453e3152ad4..13e3e08885d 100644
--- 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
index 34a0754609e..9c6f42a944d 100644
--- 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
index eafffd9a8f0..82c87c9f44f 100644
--- 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', {