fix(protocol-designer): fix layout for ProtocolSteps

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx

@@ -272,6 +272,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         />
       ) : null}
       <Toolbox
+        height="calc(100vh - 6rem)"
         position={POSITION_RELATIVE}
         subHeader={
           isMultiStepToolbox ? (

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

@@ -415,9 +415,7 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
     >
       {stepSummaryContent != null ? (
         <ListItem type="noActive">
-          <Flex padding={SPACING.spacing12} height="4.75rem">
-            {stepSummaryContent}
-          </Flex>
+          <Flex padding={SPACING.spacing12}>{stepSummaryContent}</Flex>
         </ListItem>
       ) : null}
       {stepDetails != null && stepDetails !== '' ? (

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx

@@ -58,6 +58,7 @@ export function SubstepsToolbox(
       substeps.commandCreatorFnName === 'mix')) ||
     substeps.substepType === THERMOCYCLER_PROFILE ? (
     <Toolbox
+      height="calc(100vh - 6rem)"
       width={FLEX_MAX_CONTENT}
       closeButton={<Icon size="2rem" name="close" />}
       onCloseClick={handleClose}

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx

@@ -69,6 +69,7 @@ export const TimelineToolbox = (): JSX.Element => {
       titlePadding={SPACING.spacing12}
       childrenPadding={SPACING.spacing12}
       confirmButton={formData != null ? undefined : <AddStepButton />}
+      height="calc(100vh - 6rem)"
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}

protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx

@@ -12,7 +12,10 @@ import {
   getSelectedSubstep,
   getSelectedTerminalItemId,
 } from '../../../../ui/steps/selectors'
-import { getDesignerTab } from '../../../../file-data/selectors'
+import {
+  getDesignerTab,
+  getRobotStateTimeline,
+} from '../../../../file-data/selectors'
 import { getEnableHotKeysDisplay } from '../../../../feature-flags/selectors'
 import { DeckSetupContainer } from '../../DeckSetup'
 import { OffDeck } from '../../Offdeck'
@@ -57,6 +60,10 @@ const MOCK_STEP_FORMS = {
 describe('ProtocolSteps', () => {
   beforeEach(() => {
     vi.mocked(getDesignerTab).mockReturnValue('protocolSteps')
+    vi.mocked(getRobotStateTimeline).mockReturnValue({
+      timeline: [],
+      errors: [],
+    })
     vi.mocked(TimelineToolbox).mockReturnValue(<div>mock TimelineToolbox</div>)
     vi.mocked(DeckSetupContainer).mockReturnValue(
       <div>mock DeckSetupContainer</div>

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

@@ -5,9 +5,9 @@ import {
   ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
+  FLEX_MAX_CONTENT,
   Flex,
   JUSTIFY_CENTER,
-  JUSTIFY_FLEX_START,
   JUSTIFY_SPACE_BETWEEN,
   POSITION_FIXED,
   SPACING,
@@ -34,7 +34,10 @@ import { TimelineToolbox, SubstepsToolbox } from './Timeline'
 import { StepForm } from './StepForm'
 import { StepSummary } from './StepSummary'
 import { BatchEditToolbox } from './BatchEditToolbox'
-import { getDesignerTab } from '../../../file-data/selectors'
+import {
+  getDesignerTab,
+  getRobotStateTimeline,
+} from '../../../file-data/selectors'
 import { TimelineAlerts } from '../../../organisms'
 
 const CONTENT_MAX_WIDTH = '46.9375rem'
@@ -64,31 +67,37 @@ export function ProtocolSteps(): JSX.Element {
       ? savedStepForms[currentstepIdForStepSummary]
       : null
 
+  const { errors: timelineErrors } = useSelector(getRobotStateTimeline)
+  const hasTimelineErrors =
+    timelineErrors != null ? timelineErrors.length > 0 : false
+  const showTimelineAlerts =
+    hasTimelineErrors && tab === 'protocolSteps' && formData == null
   const stepDetails = currentStep?.stepDetails ?? null
+
   return (
     <Flex
       backgroundColor={COLORS.grey10}
+      height="calc(100vh - 4rem)"
+      minHeight={FLEX_MAX_CONTENT}
       width="100%"
+      padding={SPACING.spacing12}
       gridGap={SPACING.spacing16}
-      height="calc(100vh - 4rem)"
       justifyContent={JUSTIFY_SPACE_BETWEEN}
-      padding={SPACING.spacing12}
     >
       <TimelineToolbox />
       <Flex
         alignItems={ALIGN_CENTER}
-        alignSelf={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
         width="100%"
-        justifyContent={JUSTIFY_FLEX_START}
+        paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
           gridGap={SPACING.spacing16}
           maxWidth={CONTENT_MAX_WIDTH}
         >
-          {tab === 'protocolSteps' ? (
+          {showTimelineAlerts ? (
             <TimelineAlerts justifyContent={JUSTIFY_CENTER} width="100%" />
           ) : null}
           <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
@@ -128,9 +137,6 @@ export function ProtocolSteps(): JSX.Element {
                 stepDetails={stepDetails}
               />
             ) : null}
-            {selectedTerminalItem != null && currentHoveredStepId == null ? (
-              <Flex height="4.75rem" width="100%" />
-            ) : null}
           </Flex>
         </Flex>
         {enableHoyKeyDisplay ? (

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

@@ -6,6 +6,7 @@ import {
   ALIGN_END,
   COLORS,
   DIRECTION_COLUMN,
+  FLEX_MAX_CONTENT,
   Flex,
   INFO_TOAST,
   SPACING,
@@ -149,7 +150,7 @@ export function Designer(): JSX.Element {
           }}
         />
       ) : null}
-      <Flex flexDirection={DIRECTION_COLUMN}>
+      <Flex flexDirection={DIRECTION_COLUMN} minHeight={FLEX_MAX_CONTENT}>
         <ProtocolNavBar
           hasZoomInSlot={zoomIn.slot != null || zoomIn.cutout != null}
           hasTrashEntity={hasTrashEntity}