fix(protocol-designer): fix height and padding in ProtocolSteps (#19140)

This PR fixes the max height of `ProtocolSteps` container in the
`Designer` component to account for the NavBar height and exclude excess
scrollable white space at the bottom of the container. It also fixes the
padding logic in `ProtocolSteps` to show '0' padding if there are
timeline errors (since the Export button is no longer position ed
relatively)

Author: ncdiehl11

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

@@ -25,7 +25,6 @@ import {
   OT2_ROBOT_TYPE,
 } from '@opentrons/shared-data'
 
-import { NAV_BAR_HEIGHT_REM } from '../../../components/atoms'
 import { ExportButton, HotKeyDisplay } from '../../../components/molecules'
 import {
   SlotDetailsContainer,
@@ -234,7 +233,6 @@ export function ProtocolSteps({
 
       <Flex
         backgroundColor={COLORS.grey10}
-        maxHeight={`calc(100vh - ${NAV_BAR_HEIGHT_REM}rem)`}
         width="100%"
         minHeight={FLEX_MAX_CONTENT}
       >
@@ -272,7 +270,7 @@ export function ProtocolSteps({
               <Flex
                 justifyContent={JUSTIFY_END}
                 position={POSITION_ABSOLUTE}
-                right="0"
+                right={SPACING.spacing24}
                 zIndex={1000}
               >
                 <ExportButton onClick={handleExporting} />
@@ -291,7 +289,9 @@ export function ProtocolSteps({
                   : CONTENT_MAX_WIDTH
               }
               justifyContent={JUSTIFY_CENTER}
-              paddingTop={isZoomedIn ? '0' : SPACING.spacing60}
+              paddingTop={
+                isZoomedIn || showTimelineAlerts ? '0' : SPACING.spacing60
+              }
               marginX="auto"
             >
               {isZoomedIn || selectedTerminalItemId === HARDWARE_ID ? null : (

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

@@ -10,6 +10,7 @@ import {
   useOnClickOutside,
 } from '@opentrons/components'
 
+import { NAV_BAR_HEIGHT_REM } from '../../components/atoms/constants'
 import { DefineLiquidsModal } from '../../components/organisms'
 import { useKitchen } from '../../components/organisms/Kitchen/hooks'
 import { LiquidsOverflowMenu } from '../../components/organisms/LiquidsOverflowMenu'
@@ -101,7 +102,12 @@ export function Designer(): JSX.Element {
           targetWidth={targetWidth}
         />
       ) : null}
-      <Flex height="100%" width="100%" overflowY={OVERFLOW_HIDDEN}>
+      <Flex
+        height="100%"
+        maxHeight={`calc(100vh - ${NAV_BAR_HEIGHT_REM}rem )`}
+        width="100%"
+        overflowY={OVERFLOW_HIDDEN}
+      >
         <ProtocolSteps
           zoomedInSlot={zoomIn.slot}
           showLiquidOverflowMenu={showLiquidOverflowMenu}