From 2f0ba2e5f31354fc409f0cdcb237dc3317d8cb25 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Wed, 13 Nov 2024 10:48:04 -0500
Subject: [PATCH] fix(protocol-designer): fix confirm button size issue
 (#16780)

* fix(protocol-designer): fix confirm button size issue
---
 .../src/pages/CreateNewProtocolWizard/SelectRobot.tsx       | 3 ++-
 .../src/pages/CreateNewProtocolWizard/WizardBody.tsx        | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectRobot.tsx
index b6ab28893e6..7c88d4187d5 100644
--- 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
index f1882cb4ca9..140878c9994 100644
--- 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 ? (