fix(app): confirm values button shrinking issue (#16134)

* fix(app): confirm values button shrinking issue
Opentrons · Aug 27, 2024 · f5e3317 · f5e3317
1 parent f4d512d
commit f5e3317
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx
@@ -15,19 +15,20 @@ import {
   DISPLAY_BLOCK,
   Flex,
   Icon,
-  Link as LinkComponent,
   JUSTIFY_CENTER,
   JUSTIFY_END,
   JUSTIFY_FLEX_START,
+  LegacyStyledText,
+  Link as LinkComponent,
+  NO_WRAP,
   OVERFLOW_WRAP_ANYWHERE,
   PrimaryButton,
   ProtocolDeck,
-  SPACING,
   SecondaryButton,
-  LegacyStyledText,
+  SPACING,
   TYPOGRAPHY,
-  useTooltip,
   useHoverTooltip,
+  useTooltip,
 } from '@opentrons/components'
 import {
   ApiHostProvider,
@@ -587,17 +588,21 @@ export function ChooseProtocolSlideoutComponent(
         {t('shared:continue_to_param')}
       </PrimaryButton>
     ) : (
-      <Flex gridGap={SPACING.spacing8} flexDirection={DIRECTION_ROW}>
+      <Flex
+        gridGap={SPACING.spacing8}
+        flexDirection={DIRECTION_ROW}
+        whiteSpace={NO_WRAP}
+      >
         <SecondaryButton
           onClick={() => {
             setCurrentPage(1)
           }}
-          width="51%"
+          width="50%"
         >
           {t('shared:change_protocol')}
         </SecondaryButton>
         <PrimaryButton
-          width="49%"
+          width="50%"
           onClick={handleProceed}
           disabled={hasParamError}
           {...targetPropsHover}
@@ -606,7 +611,6 @@ export function ChooseProtocolSlideoutComponent(
             <Flex
               gridGap={SPACING.spacing4}
               alignItems={ALIGN_CENTER}
-              whiteSpace="nowrap"
               marginLeft={`-${SPACING.spacing4}`}
             >
               <Icon name="ot-spinner" spin size="1rem" />

diff --git a/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx b/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx
@@ -5,15 +5,16 @@ import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 
 import {
-  Icon,
-  Flex,
+  ALIGN_CENTER,
   DIRECTION_COLUMN,
-  PrimaryButton,
   DIRECTION_ROW,
+  Flex,
+  Icon,
+  NO_WRAP,
+  PrimaryButton,
   SecondaryButton,
   SPACING,
   useHoverTooltip,
-  ALIGN_CENTER,
 } from '@opentrons/components'
 import { useUploadCsvFileMutation } from '@opentrons/react-api-client'
 
@@ -259,7 +260,11 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
             </PrimaryButton>
           </>
         ) : (
-          <Flex gridGap={SPACING.spacing8} flexDirection={DIRECTION_ROW}>
+          <Flex
+            gridGap={SPACING.spacing8}
+            flexDirection={DIRECTION_ROW}
+            whiteSpace={NO_WRAP}
+          >
             <SecondaryButton
               onClick={() => {
                 setCurrentPage(1)
@@ -278,7 +283,6 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
                 <Flex
                   gridGap={SPACING.spacing4}
                   alignItems={ALIGN_CENTER}
-                  whiteSpace="nowrap"
                   marginLeft={`-${SPACING.spacing4}`}
                 >
                   <Icon name="ot-spinner" spin size="1rem" />