fix(protocol-designer): Fix Designer's page height issue

protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx

@@ -86,11 +86,13 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
       <Flex
         flex="0 0 auto"
         width={OFF_DECK_MAP_WIDTH}
-        height={
+        height="100%"
+        maxHeight={
           tab === 'startingDeck'
             ? OFF_DECK_MAP_HEIGHT
             : OFF_DECK_MAP_HEIGHT_FOR_STEP
         }
+        minHeight={tab === 'protocolSteps' && OFF_DECK_MAP_HEIGHT_FOR_STEP}
         alignItems={ALIGN_CENTER}
         borderRadius={SPACING.spacing12}
         padding={`${SPACING.spacing16} ${SPACING.spacing40}`}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/LabwareLocationField.tsx

@@ -49,6 +49,7 @@
       {...props}
       options={unoccupiedLabwareLocationsOptions}
       errorToShow={props.errorToShow}
+      width="100%"
       title={t('protocol_steps:new_location')}
       onEnter={(id: string) => {
         dispatch(

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/MoveLabwareField.tsx

@@ -14,6 +14,7 @@
       {...props}
       options={options}
       title={t('select_labware')}
+      width="100%"
       onEnter={(id: string) => {
         dispatch(hoverSelection({ id, text: t('application:select') }))
       }}

protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx

@@ -10,6 +10,7 @@
   Flex,
   JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
+  OVERFLOW_AUTO,
   POSITION_FIXED,
   POSITION_RELATIVE,
   SPACING,
@@ -44,6 +45,7 @@
 import { DraggableSidebar } from './DraggableSidebar'
 
 const CONTENT_MAX_WIDTH = '46.9375rem'
+const STEP_SUMMARY_HEIGHT = '5.5rem'
 
 export function ProtocolSteps(): JSX.Element {
   const { i18n, t } = useTranslation('starting_deck_state')
@@ -85,86 +87,91 @@
       height="calc(100vh - 4rem)"
       width="100%"
       minHeight={FLEX_MAX_CONTENT}
-      id="container"
     >
       <Flex height="100%" padding={SPACING.spacing12}>
         <DraggableSidebar setTargetWidth={setTargetWidth} />
       </Flex>
       <Flex
-        alignItems={ALIGN_CENTER}
+        flex="2.85"
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
-        flex="2.85"
         paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
         height="100%"
         position={POSITION_RELATIVE}
+        overflowY={OVERFLOW_AUTO}
       >
         <Flex
-          flexDirection={DIRECTION_COLUMN}
-          gridGap={SPACING.spacing24}
-          width={CONTENT_MAX_WIDTH}
+          width="100%"
           height="100%"
-          justifyContent={JUSTIFY_CENTER}
-          paddingY={SPACING.spacing120}
+          overflow={OVERFLOW_AUTO}
+          flexDirection={DIRECTION_COLUMN}
         >
-          {showTimelineAlerts ? (
-            <TimelineAlerts
-              justifyContent={JUSTIFY_CENTER}
-              width="100%"
-              flexDirection={DIRECTION_COLUMN}
-              gridGap={SPACING.spacing4}
-            />
-          ) : null}
-          <Flex
-            justifyContent={JUSTIFY_SPACE_BETWEEN}
-            alignItems={ALIGN_CENTER}
-            height="2.25rem"
-          >
-            {currentStep != null && hoveredTerminalItem == null ? (
-              <StyledText desktopStyle="headingSmallBold">
-                {i18n.format(currentStep.stepName, 'titleCase')}
-              </StyledText>
-            ) : null}
-            {(hoveredTerminalItem != null || selectedTerminalItem != null) &&
-            currentHoveredStepId == null ? (
-              <StyledText desktopStyle="headingSmallBold">
-                {t(hoveredTerminalItem ?? selectedTerminalItem)}
-              </StyledText>
-            ) : null}
-
-            <ToggleGroup
-              selectedValue={deckView}
-              leftText={leftString}
-              rightText={rightString}
-              leftClick={() => {
-                setDeckView(leftString)
-              }}
-              rightClick={() => {
-                setDeckView(rightString)
-              }}
-            />
-          </Flex>
           <Flex
             flexDirection={DIRECTION_COLUMN}
-            gridGap={SPACING.spacing16}
-            height="100%"
+            gridGap={SPACING.spacing24}
+            width={CONTENT_MAX_WIDTH}
+            justifyContent={JUSTIFY_CENTER}
+            paddingY={SPACING.spacing120}
+            marginX="auto"
           >
-            {deckView === leftString ? (
-              <DeckSetupContainer tab="protocolSteps" />
-            ) : (
-              <OffDeck tab="protocolSteps" />
-            )}
-            {/* avoid shifting the deck view container */}
+            {showTimelineAlerts ? (
+              <TimelineAlerts
+                justifyContent={JUSTIFY_CENTER}
+                width="100%"
+                flexDirection={DIRECTION_COLUMN}
+                gridGap={SPACING.spacing4}
+              />
+            ) : null}
             <Flex
-              height="5.5rem"
-              opacity={formData == null ? 1 : 0}
-              id="summary container"
+              justifyContent={JUSTIFY_SPACE_BETWEEN}
+              alignItems={ALIGN_CENTER}
+              height="2.25rem"
             >
-              <StepSummary
-                currentStep={currentStep}
-                stepDetails={stepDetails}
+              {currentStep != null && hoveredTerminalItem == null ? (
+                <StyledText desktopStyle="headingSmallBold">
+                  {i18n.format(currentStep.stepName, 'titleCase')}
+                </StyledText>
+              ) : null}
+              {(hoveredTerminalItem != null || selectedTerminalItem != null) &&
+              currentHoveredStepId == null ? (
+                <StyledText desktopStyle="headingSmallBold">
+                  {t(hoveredTerminalItem ?? selectedTerminalItem)}
+                </StyledText>
+              ) : null}
+
+              <ToggleGroup
+                selectedValue={deckView}
+                leftText={leftString}
+                rightText={rightString}
+                leftClick={() => {
+                  setDeckView(leftString)
+                }}
+                rightClick={() => {
+                  setDeckView(rightString)
+                }}
               />
             </Flex>
+            <Flex
+              flexDirection={DIRECTION_COLUMN}
+              gridGap={SPACING.spacing16}
+              // height="100%"
+            >
+              {deckView === leftString ? (
+                <DeckSetupContainer tab="protocolSteps" />
+              ) : (
+                <OffDeck tab="protocolSteps" />
+              )}
+              {/* avoid shifting the deck view container */}
+              <Flex
+                height={STEP_SUMMARY_HEIGHT}
+                opacity={formData == null ? 1 : 0}
+              >
+                <StepSummary
+                  currentStep={currentStep}
+                  stepDetails={stepDetails}
+                />
+              </Flex>
+            </Flex>
           </Flex>
         </Flex>
         {enableHotKeyDisplay ? (

protocol-designer/src/pages/Designer/index.tsx

@@ -11,6 +11,7 @@ import {
   INFO_TOAST,
   JUSTIFY_CENTER,
   JUSTIFY_FLEX_END,
+  OVERFLOW_HIDDEN,
   SPACING,
   ToggleGroup,
   useOnClickOutside,
@@ -219,7 +220,9 @@ export function Designer(): JSX.Element {
             </Flex>
           </Flex>
         ) : (
-          <ProtocolSteps />
+          <Flex height="100%" width="100%" overflowY={OVERFLOW_HIDDEN}>
+            <ProtocolSteps />
+          </Flex>
         )}
       </Flex>
     </>

protocol-designer/src/pages/ProtocolOverview/OffdeckThumbnail.tsx

@@ -2,9 +2,12 @@
 import { useSelector } from 'react-redux'
 import {
   ALIGN_CENTER,
+  ALIGN_FLEX_START,
   BORDERS,
+  Box,
   COLORS,
   DIRECTION_COLUMN,
+  DISPLAY_GRID,
   Flex,
   Icon,
   JUSTIFY_CENTER,
@@ -13,7 +16,6 @@
   RobotWorkSpace,
   SPACING,
   StyledText,
-  WRAP,
 } from '@opentrons/components'
 import { selectors } from '../../labware-ingred/selectors'
 import * as wellContentsSelectors from '../../top-selectors/well-contents'
@@ -52,6 +54,7 @@
       }
       flexDirection={DIRECTION_COLUMN}
       borderRadius={BORDERS.borderRadius8}
+      gridGap={SPACING.spacing40}
     >
       {offDeckLabware.length === 0 ? (
         <Flex
@@ -73,55 +76,64 @@
             width="100%"
             paddingTop={SPACING.spacing16}
             color={COLORS.grey60}
-            marginBottom={SPACING.spacing40}
           >
             <StyledText desktopStyle="bodyDefaultSemiBold">
               {i18n.format(t('off_deck_labware'), 'upperCase')}
             </StyledText>
           </Flex>
 
           <Flex
-            flexWrap={WRAP}
-            gridGap={SPACING.spacing16}
-            paddingX={SPACING.spacing16}
+            justifyContent={JUSTIFY_CENTER}
+            width="100%"
+            height="100%"
+            padding={`0 ${SPACING.spacing40} ${SPACING.spacing16}`}
             overflowY={OVERFLOW_SCROLL}
           >
-            {offDeckLabware.map(lw => {
-              const wellContents = allWellContentsForActiveItem
-                ? allWellContentsForActiveItem[lw.id]
-                : null
-              const definition = lw.def
-              const { dimensions } = definition
-              return (
-                <Flex flexDirection={DIRECTION_COLUMN} key={lw.id}>
-                  <RobotWorkSpace
-                    key={lw.id}
-                    viewBox={`${definition.cornerOffsetFromSlot.x} ${definition.cornerOffsetFromSlot.y} ${dimensions.xDimension} ${dimensions.yDimension}`}
-                    width="6.875rem"
-                    height="3.75rem"
-                  >
-                    {() => (
-                      <>
-                        <LabwareRender
-                          definition={definition}
-                          wellFill={wellFillFromWellContents(
-                            wellContents,
-                            liquidDisplayColors
-                          )}
-                        />
-                        <SlotHover
-                          robotType={robotType}
-                          hover={hover}
-                          setHover={setHover}
-                          slotPosition={[0, 0, 0]}
-                          slotId={lw.id}
-                        />
-                      </>
-                    )}
-                  </RobotWorkSpace>
-                </Flex>
-              )
-            })}
+            <Box
+              display={DISPLAY_GRID}
+              gridTemplateColumns="repeat(4, 6.875rem)"
+              gridGap={SPACING.spacing24}
+              alignContent={ALIGN_FLEX_START}
+              height="3.75rem"
+            >
+              {offDeckLabware.map(lw => {
+                const wellContents =
+                  allWellContentsForActiveItem !== null
+                    ? allWellContentsForActiveItem[lw.id]
+                    : null
+                const definition = lw.def
+                const { dimensions } = definition
+                return (
+                  <Flex flexDirection={DIRECTION_COLUMN} key={lw.id}>
+                    <RobotWorkSpace
+                      key={lw.id}
+                      viewBox={`${definition.cornerOffsetFromSlot.x} ${definition.cornerOffsetFromSlot.y} ${dimensions.xDimension} ${dimensions.yDimension}`}
+                      width="6.875rem"
+                      height="3.75rem"
+                    >
+                      {() => (
+                        <>
+                          <LabwareRender
+                            definition={definition}
+                            wellFill={wellFillFromWellContents(
+                              wellContents,
+                              liquidDisplayColors
+                            )}
+                          />
+                          <SlotHover
+                            robotType={robotType}
+                            hover={hover}
+                            setHover={setHover}
+                            slotPosition={[0, 0, 0]}
+                            slotId={lw.id}
+                          />
+                        </>
+                      )}
+                    </RobotWorkSpace>
+                  </Flex>
+                )
+              })}
+            </Box>
           </Flex>
         </>
       )}