fix(protocol-designer): fix padding and footer position in onboard wi…

…zard (#16832) This PR fixes two bugs in the onboarding wizard. Here, I set a minimum grid gap between the left side content and footer buttons so that the buttons don't reposition on steps of different heights. I also fix the padding for the left side content to be a constant 5rem. Closes RQA-3512
Opentrons · Nov 14, 2024 · 3cd7c2f · 3cd7c2f
1 parent a5b9716
commit 3cd7c2f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx
@@ -182,7 +182,6 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
           {page === 'add' ? (
             <Flex
               flexDirection={DIRECTION_COLUMN}
-              height="41.5vh"
               overflowY={OVERFLOW_AUTO}
               gridGap={SPACING.spacing32}
             >

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
@@ -2,19 +2,20 @@ import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import {
-  ALIGN_END,
   ALIGN_CENTER,
+  ALIGN_END,
   BORDERS,
   Btn,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
   LargeButton,
+  OVERFLOW_SCROLL,
   SPACING,
   StyledText,
-  TYPOGRAPHY,
   Tooltip,
+  TYPOGRAPHY,
   useHoverTooltip,
 } from '@opentrons/components'
 import temporaryImg from '../../assets/images/placeholder_image_delete.png'
@@ -56,13 +57,19 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
     >
       <Flex
         width="60%"
-        padding={`${SPACING.spacing40} ${SPACING.spacing80} ${SPACING.spacing80} ${SPACING.spacing80}`}
+        padding={SPACING.spacing80}
         flexDirection={DIRECTION_COLUMN}
         backgroundColor={COLORS.white}
         borderRadius={BORDERS.borderRadius16}
         justifyContent={JUSTIFY_SPACE_BETWEEN}
+        gridGap={SPACING.spacing24}
       >
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
+        <Flex
+          flexDirection={DIRECTION_COLUMN}
+          gridGap={SPACING.spacing8}
+          height="100%"
+          overflowY={OVERFLOW_SCROLL}
+        >
           <StyledText
             color={COLORS.grey60}
             desktopStyle="bodyDefaultSemiBold"