fix broken offdeck view

Opentrons · Oct 15, 2024 · 62a3c87 · 62a3c87
1 parent b91c57b
commit 62a3c87
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
@@ -48,8 +48,8 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
     <Flex
       backgroundColor={COLORS.white}
       borderRadius={BORDERS.borderRadius8}
-      width={tab === 'startingDeck' ? '100%' : '90%'}
-      height="70vh"
+      width={tab === 'startingDeck' ? '100vw' : '75vh'}
+      height="65vh"
       padding={`${SPACING.spacing40} ${SPACING.spacing24}`}
       justifyContent={JUSTIFY_CENTER}
       gridGap={SPACING.spacing24}
@@ -64,13 +64,16 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
         </Flex>
       ) : null}
       <Flex
-        marginRight="17.375rem"
-        marginLeft={hoverSlot ? '0' : '17.375rem'}
+        marginRight={tab === 'startingDeck' ? '17.375rem' : '0'}
+        marginLeft={
+          (tab === 'startingDeck' && hoverSlot) || tab === 'protocolSteps'
+            ? '0'
+            : '17.375rem'
+        }
         width="100%"
         borderRadius={SPACING.spacing12}
         padding={`${SPACING.spacing16} ${SPACING.spacing40}`}
         backgroundColor={COLORS.grey20}
-        height="100%"
         overflowY={OVERFLOW_SCROLL}
         flexDirection={DIRECTION_COLUMN}
       >

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -9,6 +9,7 @@ import {
   COLORS,
   Flex,
   Icon,
+  POSITION_RELATIVE,
   PrimaryButton,
   SPACING,
   SecondaryButton,
@@ -139,7 +140,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
   return (
     <>
       <Toolbox
-        position="relative"
+        position={POSITION_RELATIVE}
         subHeader={
           isMultiStepToolbox ? (
             <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
@@ -41,7 +41,6 @@ describe('ProtocolSteps', () => {
 
   it('renders each component in ProtocolSteps', () => {
     render()
-    screen.debug()
     screen.getByText('mock TimelineToolbox')
     screen.getByText('mock DeckSetupContainer')
   })

diff --git a/shared-data/js/helpers/orderRuntimeParameterRangeOptions.ts b/shared-data/js/helpers/orderRuntimeParameterRangeOptions.ts
@@ -22,11 +22,12 @@ export const orderRuntimeParameterRangeOptions = (
   choices: Choice[]
 ): string => {
   // when this function is called, the array length is always 2
+  console.log({ choices })
   if (choices.length > 2) {
     console.error(`expected to have length 2 but has length ${choices.length}`)
     return ''
   }
-  const displayNames = [choices[0].displayName, choices[1].displayName]
+  const displayNames = choices.map(choice => choice.displayName)
   if (isNumeric(displayNames[0])) {
     return displayNames
       .sort((a, b) => {