fix(protocol-designer): fix confirm button size issue (#16780)

* fix(protocol-designer): fix confirm button size issue
Opentrons · Nov 13, 2024 · 2f0ba2e · 2f0ba2e
1 parent 5421cd6
commit 2f0ba2e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx
@@ -5,6 +5,7 @@ import {
   RadioButton,
   SPACING,
   StyledText,
+  WRAP,
 } from '@opentrons/components'
 import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 import { WizardBody } from './WizardBody'
@@ -31,7 +32,7 @@ export function SelectRobot(props: WizardTileProps): JSX.Element {
           <StyledText desktopStyle="headingSmallBold">
             {t('robot_type')}
           </StyledText>
-          <Flex gridGap={SPACING.spacing4}>
+          <Flex gridGap={SPACING.spacing4} flexWrap={WRAP}>
             <RadioButton
               onChange={() => {
                 setValue('fields.robotType', FLEX_ROBOT_TYPE)

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import {
   ALIGN_END,
+  ALIGN_CENTER,
   BORDERS,
   Btn,
   COLORS,
@@ -87,9 +88,10 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
         <Flex
           alignSelf={goBack != null ? 'auto' : ALIGN_END}
           justifyContent={JUSTIFY_SPACE_BETWEEN}
+          alignItems={ALIGN_CENTER}
         >
           {goBack != null ? (
-            <Btn onClick={goBack} css={BUTTON_LINK_STYLE}>
+            <Btn onClick={goBack} css={BUTTON_LINK_STYLE} height="1.5rem">
               <StyledText desktopStyle="bodyLargeSemiBold">
                 {t('go_back')}
               </StyledText>
@@ -101,6 +103,8 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
               onClick={proceed}
               iconName="arrow-right"
               buttonText={t('shared:confirm')}
+              height="3.5rem"
+              width="8.5625rem"
             />
           </Flex>
           {tooltipOnDisabled != null ? (