From 7f9b706a2cf87afa501ee53538928cdf65d3ebbe Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Tue, 28 Jan 2025 14:44:30 -0500
Subject: [PATCH 01/11] modifying the containers

---
 .../pages/Designer/DeckSetup/DeckSetupContainer.tsx | 13 ++++++++-----
 .../src/pages/Designer/ProtocolSteps/index.tsx      |  1 +
 protocol-designer/src/pages/Designer/index.tsx      | 12 +++++++++---
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
index 53874bb8dc0..c23be8dda36 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -214,14 +214,17 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
   )
 
   return (
-    <Flex height="100%">
+    // <Flex height="100%" css={{ outline: 'solid 1px red' }}>
+    <>
       <Flex
-        backgroundColor={COLORS.white}
+        backgroundColor={COLORS.red20}
         borderRadius={BORDERS.borderRadius12}
         width="100%"
-        height={tab === 'protocolSteps' ? '65.75vh' : '100%'}
+        // height={tab === 'protocolSteps' ? '65.75vh' : '100%'}
+        height="65.75vh"
         flexDirection={DIRECTION_COLUMN}
-        padding={isZoomed ? '0' : SPACING.spacing24}
+        padding={isZoomed ? '0' : SPACING.spacing40}
+        css={{ outline: 'solid 1px blue' }}
       >
         <Flex
           width="100%"
@@ -404,6 +407,6 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
           setHoveredLabware={setHoveredLabware}
         />
       ) : null}
-    </Flex>
+    </>
   )
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 38f4979b0cf..aaa9aa0fe94 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -97,6 +97,7 @@ export function ProtocolSteps(): JSX.Element {
         flex="2.85"
         paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
         position={POSITION_RELATIVE}
+        backgroundColor={COLORS.red40}
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
index 5e560fcf6e4..e11079261ab 100644
--- a/protocol-designer/src/pages/Designer/index.tsx
+++ b/protocol-designer/src/pages/Designer/index.tsx
@@ -172,13 +172,19 @@ export function Designer(): JSX.Element {
             flexDirection={DIRECTION_COLUMN}
             backgroundColor={COLORS.grey10}
             gridGap={SPACING.spacing24}
-            padding={zoomIn.slot != null ? '0' : SPACING.spacing40}
-            height="calc(100vh - 64px)"
+            padding={
+              zoomIn.slot != null
+                ? '0'
+                : `${SPACING.spacing60} ${SPACING.spacing40}`
+            }
+            // height="calc(100vh - 64px)"
           >
             <Flex
               flexDirection={DIRECTION_COLUMN}
               gridGap={SPACING.spacing24}
-              height="100%"
+              // height="100%"
+              backgroundColor={COLORS.red40}
+              css={{ outline: 'solid 1px green' }}
             >
               {zoomIn.slot == null ? (
                 <Flex alignSelf={ALIGN_END}>

From 2a32f9504143308a0ec41fa9bcd9682cef388a43 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 31 Jan 2025 10:21:30 -0500
Subject: [PATCH 02/11] fix(protocol-designer,components): fix deck view size
 issue

fix deck view size issue

close AUTH-
---
 .../src/atoms/buttons/EmptySelectorButton.tsx |   4 +-
 .../RobotCoordinateSpaceWithRef.tsx           |   2 +
 protocol-designer/src/ProtocolEditor.tsx      |   2 +-
 protocol-designer/src/ProtocolRoutes.tsx      |   2 +-
 .../Designer/DeckSetup/DeckSetupContainer.tsx | 287 +++++++++---------
 .../pages/Designer/Offdeck/OffDeckDetails.tsx |  99 ++++--
 .../src/pages/Designer/Offdeck/Offdeck.tsx    | 119 ++++----
 .../Offdeck/__tests__/Offdeck.test.tsx        |   2 +-
 .../src/pages/Designer/Offdeck/index.ts       |   2 +-
 .../ProtocolSteps/DraggableSidebar.tsx        |   2 +-
 .../pages/Designer/ProtocolSteps/index.tsx    |  43 ++-
 .../src/pages/Designer/index.tsx              |  28 +-
 12 files changed, 358 insertions(+), 234 deletions(-)

diff --git a/components/src/atoms/buttons/EmptySelectorButton.tsx b/components/src/atoms/buttons/EmptySelectorButton.tsx
index da34a8ba710..ec3e3be0aa4 100644
--- a/components/src/atoms/buttons/EmptySelectorButton.tsx
+++ b/components/src/atoms/buttons/EmptySelectorButton.tsx
@@ -62,8 +62,8 @@ interface ButtonProps {
 
 const StyledButton = styled.button<ButtonProps>`
   border: none;
-  width: ${FLEX_MAX_CONTENT};
-  height: ${FLEX_MAX_CONTENT};
+  width: 100%;
+  height: 100%;
   cursor: ${CURSOR_POINTER};
   background-color: ${COLORS.blue30};
   border-radius: ${BORDERS.borderRadius8};
diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
index 659ccbbb350..44f055ab71e 100644
--- a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
+++ b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
@@ -36,6 +36,8 @@ export function RobotCoordinateSpaceWithRef(
     wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
   }
 
+  console.log('wholeDeckViewBox', wholeDeckViewBox)
+
   return (
     <Svg
       viewBox={zoomed ? viewBox : wholeDeckViewBox}
diff --git a/protocol-designer/src/ProtocolEditor.tsx b/protocol-designer/src/ProtocolEditor.tsx
index ec0a130abd5..770e3ee0a42 100644
--- a/protocol-designer/src/ProtocolEditor.tsx
+++ b/protocol-designer/src/ProtocolEditor.tsx
@@ -38,7 +38,7 @@ export function ProtocolEditor(): JSX.Element {
         id="protocol-editor"
       >
         <PortalRoot />
-        <Flex flexDirection={DIRECTION_COLUMN}>
+        <Flex flexDirection={DIRECTION_COLUMN} height="100%">
           <HashRouter>
             <ProtocolRoutes />
           </HashRouter>
diff --git a/protocol-designer/src/ProtocolRoutes.tsx b/protocol-designer/src/ProtocolRoutes.tsx
index 854eacfa993..63c31842bbe 100644
--- a/protocol-designer/src/ProtocolRoutes.tsx
+++ b/protocol-designer/src/ProtocolRoutes.tsx
@@ -73,7 +73,7 @@ export function ProtocolRoutes(): JSX.Element {
     >
       <Navigation />
       <Kitchen>
-        <Box width="100%">
+        <Box width="100%" height="100%">
           <GateModal />
           <LabwareUploadModal />
           <FileUploadMessagesModal />
diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
index c23be8dda36..9a43ee7232d 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -213,18 +213,24 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
     aa => isAddressableAreaStandardSlot(aa.id, deckDef)
   )
 
+  // console.log('ViewBox Adjusted:', viewBoxAdjusted)
+  // console.log('ViewBox Numerical:', viewBoxNumerical)
+  // console.log('Deck Map Ratio:', deckMapRatio)
+  // console.log('viewBox', viewBox)
+
   return (
     // <Flex height="100%" css={{ outline: 'solid 1px red' }}>
     <>
       <Flex
-        backgroundColor={COLORS.red20}
+        backgroundColor={COLORS.white}
         borderRadius={BORDERS.borderRadius12}
         width="100%"
         // height={tab === 'protocolSteps' ? '65.75vh' : '100%'}
-        height="65.75vh"
+        // height="65.75vh"
+        height="100%"
         flexDirection={DIRECTION_COLUMN}
         padding={isZoomed ? '0' : SPACING.spacing40}
-        css={{ outline: 'solid 1px blue' }}
+        id="deck setup top flex"
       >
         <Flex
           width="100%"
@@ -232,153 +238,162 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
           alignItems={ALIGN_CENTER}
           justifyContent={JUSTIFY_CENTER}
           gridGap={SPACING.spacing12}
+          id="svg flex"
         >
           {zoomIn.slot == null ? (
-            <Box width="20%">
+            <Flex justifyContent={JUSTIFY_CENTER}>
               {hoverSlot != null &&
               breakPointSize !== 'small' &&
               LEFT_SLOTS.includes(hoverSlot) ? (
                 <SlotDetailsContainer robotType={robotType} slot={hoverSlot} />
               ) : null}
-            </Box>
+            </Flex>
           ) : null}
-          <RobotCoordinateSpaceWithRef
-            height="100%"
-            width={
-              zoomIn.slot != null || tab === 'protocolSteps' ? '100%' : '50%'
-            }
-            minWidth={tab === 'protocolSteps' ? 'auto' : '30rem'}
-            deckDef={deckDef}
-            viewBox={viewBoxAdjusted}
-            outline="auto"
-            zoomed={zoomIn.slot != null}
-            borderRadius={BORDERS.borderRadius12}
-          >
-            {() => (
-              <>
-                {robotType === OT2_ROBOT_TYPE ? (
-                  <DeckFromLayers
-                    robotType={robotType}
-                    layerBlocklist={OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST}
-                  />
-                ) : (
-                  <>
-                    {filteredAddressableAreas.map(addressableArea => {
-                      const cutoutId = getCutoutIdForAddressableArea(
-                        addressableArea.id,
-                        deckDef.cutoutFixtures
-                      )
-                      return cutoutId != null ? (
-                        <SingleSlotFixture
-                          key={addressableArea.id}
-                          cutoutId={cutoutId}
-                          deckDefinition={deckDef}
-                          slotClipColor={darkFill}
-                          showExpansion={cutoutId === 'cutoutA1'}
-                          fixtureBaseColor={lightFill}
-                        />
-                      ) : null
-                    })}
-                    {stagingAreaFixtures.map(fixture => {
-                      if (
-                        zoomIn.cutout == null ||
-                        zoomIn.cutout !== fixture.location
-                      ) {
-                        return (
-                          <StagingAreaFixture
-                            key={fixture.id}
-                            cutoutId={fixture.location as StagingAreaLocation}
-                            deckDefinition={deckDef}
-                            slotClipColor={darkFill}
-                            fixtureBaseColor={lightFill}
-                          />
+          <Flex width="100%" height="100%" id="before robot coordinate space">
+            <RobotCoordinateSpaceWithRef
+              height="100%"
+              width={
+                zoomIn.slot != null || tab === 'protocolSteps' ? '100%' : '50%'
+              }
+              minWidth={tab === 'protocolSteps' ? 'auto' : '30rem'}
+              deckDef={deckDef}
+              viewBox={viewBoxAdjusted}
+              outline="auto"
+              zoomed={zoomIn.slot != null}
+              borderRadius={BORDERS.borderRadius12}
+              style={{
+                // marginLeft: SPACING.spacing16,
+                transform: `translateX(${
+                  deckDef?.cornerOffsetFromOrigin[0] * -0.2
+                }px) scale(1, -1)`,
+              }}
+            >
+              {() => (
+                <>
+                  {robotType === OT2_ROBOT_TYPE ? (
+                    <DeckFromLayers
+                      robotType={robotType}
+                      layerBlocklist={OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST}
+                    />
+                  ) : (
+                    <>
+                      {filteredAddressableAreas.map(addressableArea => {
+                        const cutoutId = getCutoutIdForAddressableArea(
+                          addressableArea.id,
+                          deckDef.cutoutFixtures
                         )
-                      }
-                    })}
-                    {trash != null
-                      ? trashBinFixtures.map(({ cutoutId }) =>
-                          cutoutId != null &&
-                          (zoomIn.cutout == null ||
-                            zoomIn.cutout !== cutoutId) ? (
-                            <Fragment key={cutoutId}>
-                              <SingleSlotFixture
-                                cutoutId={cutoutId}
-                                deckDefinition={deckDef}
-                                slotClipColor={COLORS.transparent}
-                                fixtureBaseColor={lightFill}
-                              />
-                              <FlexTrash
-                                robotType={robotType}
-                                trashIconColor={lightFill}
-                                trashCutoutId={cutoutId as TrashCutoutId}
-                                backgroundColor={COLORS.grey50}
-                              />
-                            </Fragment>
-                          ) : null
-                        )
-                      : null}
-                    {wasteChuteFixtures.map(fixture => {
-                      if (
-                        zoomIn.cutout == null ||
-                        zoomIn.cutout !== fixture.location
-                      ) {
-                        return (
-                          <WasteChuteFixture
-                            key={fixture.id}
-                            cutoutId={
-                              fixture.location as typeof WASTE_CHUTE_CUTOUT
-                            }
-                            deckDefinition={deckDef}
-                            fixtureBaseColor={lightFill}
-                          />
-                        )
-                      }
-                    })}
-                    {wasteChuteStagingAreaFixtures.map(fixture => {
-                      if (
-                        zoomIn.cutout == null ||
-                        zoomIn.cutout !== fixture.location
-                      ) {
-                        return (
-                          <WasteChuteStagingAreaFixture
-                            key={fixture.id}
-                            cutoutId={
-                              fixture.location as typeof WASTE_CHUTE_CUTOUT
-                            }
+                        return cutoutId != null ? (
+                          <SingleSlotFixture
+                            key={addressableArea.id}
+                            cutoutId={cutoutId}
                             deckDefinition={deckDef}
                             slotClipColor={darkFill}
+                            showExpansion={cutoutId === 'cutoutA1'}
                             fixtureBaseColor={lightFill}
                           />
-                        )
-                      }
-                    })}
-                  </>
-                )}
-                <DeckSetupDetails
-                  selectedZoomInSlot={zoomIn.slot ?? undefined}
-                  hoveredLabware={hoveredLabware}
-                  hoveredModule={hoveredModule}
-                  hoveredFixture={hoveredFixture}
-                  hover={hoverSlot}
-                  tab={tab}
-                  setHover={setHoverSlot}
-                  addEquipment={addEquipment}
-                  activeDeckSetup={activeDeckSetup}
-                  stagingAreaCutoutIds={stagingAreaFixtures.map(
-                    areas => areas.location as CutoutId
+                        ) : null
+                      })}
+                      {stagingAreaFixtures.map(fixture => {
+                        if (
+                          zoomIn.cutout == null ||
+                          zoomIn.cutout !== fixture.location
+                        ) {
+                          return (
+                            <StagingAreaFixture
+                              key={fixture.id}
+                              cutoutId={fixture.location as StagingAreaLocation}
+                              deckDefinition={deckDef}
+                              slotClipColor={darkFill}
+                              fixtureBaseColor={lightFill}
+                            />
+                          )
+                        }
+                      })}
+                      {trash != null
+                        ? trashBinFixtures.map(({ cutoutId }) =>
+                            cutoutId != null &&
+                            (zoomIn.cutout == null ||
+                              zoomIn.cutout !== cutoutId) ? (
+                              <Fragment key={cutoutId}>
+                                <SingleSlotFixture
+                                  cutoutId={cutoutId}
+                                  deckDefinition={deckDef}
+                                  slotClipColor={COLORS.transparent}
+                                  fixtureBaseColor={lightFill}
+                                />
+                                <FlexTrash
+                                  robotType={robotType}
+                                  trashIconColor={lightFill}
+                                  trashCutoutId={cutoutId as TrashCutoutId}
+                                  backgroundColor={COLORS.grey50}
+                                />
+                              </Fragment>
+                            ) : null
+                          )
+                        : null}
+                      {wasteChuteFixtures.map(fixture => {
+                        if (
+                          zoomIn.cutout == null ||
+                          zoomIn.cutout !== fixture.location
+                        ) {
+                          return (
+                            <WasteChuteFixture
+                              key={fixture.id}
+                              cutoutId={
+                                fixture.location as typeof WASTE_CHUTE_CUTOUT
+                              }
+                              deckDefinition={deckDef}
+                              fixtureBaseColor={lightFill}
+                            />
+                          )
+                        }
+                      })}
+                      {wasteChuteStagingAreaFixtures.map(fixture => {
+                        if (
+                          zoomIn.cutout == null ||
+                          zoomIn.cutout !== fixture.location
+                        ) {
+                          return (
+                            <WasteChuteStagingAreaFixture
+                              key={fixture.id}
+                              cutoutId={
+                                fixture.location as typeof WASTE_CHUTE_CUTOUT
+                              }
+                              deckDefinition={deckDef}
+                              slotClipColor={darkFill}
+                              fixtureBaseColor={lightFill}
+                            />
+                          )
+                        }
+                      })}
+                    </>
                   )}
-                  {...{
-                    deckDef,
-                    showGen1MultichannelCollisionWarnings,
-                  }}
-                />
-                <SlotLabels
-                  robotType={robotType}
-                  show4thColumn={stagingAreaFixtures.length > 0}
-                />
-              </>
-            )}
-          </RobotCoordinateSpaceWithRef>
+                  <DeckSetupDetails
+                    selectedZoomInSlot={zoomIn.slot ?? undefined}
+                    hoveredLabware={hoveredLabware}
+                    hoveredModule={hoveredModule}
+                    hoveredFixture={hoveredFixture}
+                    hover={hoverSlot}
+                    tab={tab}
+                    setHover={setHoverSlot}
+                    addEquipment={addEquipment}
+                    activeDeckSetup={activeDeckSetup}
+                    stagingAreaCutoutIds={stagingAreaFixtures.map(
+                      areas => areas.location as CutoutId
+                    )}
+                    {...{
+                      deckDef,
+                      showGen1MultichannelCollisionWarnings,
+                    }}
+                  />
+                  <SlotLabels
+                    robotType={robotType}
+                    show4thColumn={stagingAreaFixtures.length > 0}
+                  />
+                </>
+              )}
+            </RobotCoordinateSpaceWithRef>
+          </Flex>
           {zoomIn.slot == null ? (
             <Box width="20%">
               {hoverSlot != null &&
diff --git a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
index 5f219e8ecd1..99191e50c62 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
+++ b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
@@ -1,14 +1,19 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
+import styled from 'styled-components'
 import {
   ALIGN_CENTER,
+  ALIGN_START,
+  ALIGN_STRETCH,
   BORDERS,
+  Box,
   COLORS,
   DIRECTION_COLUMN,
   EmptySelectorButton,
   Flex,
   JUSTIFY_CENTER,
+  JUSTIFY_START,
   LabwareRender,
   OVERFLOW_AUTO,
   RobotWorkSpace,
@@ -32,7 +37,8 @@ import { HighlightOffdeckSlot } from './HighlightOffdeckSlot'
 import type { CoordinateTuple, DeckSlotId } from '@opentrons/shared-data'
 import type { DeckSetupTabType } from '../types'
 
-const OFFDECK_MAP_WIDTH = '41.625rem'
+const OFF_DECK_MAP_WIDTH = '41.625rem'
+const OFF_DECK_MAP_HEIGHT = '45.5rem'
 const ZERO_SLOT_POSITION: CoordinateTuple = [0, 0, 0]
 interface OffDeckDetailsProps extends DeckSetupTabType {
   addLabware: () => void
@@ -53,27 +59,30 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
   const allWellContentsForActiveItem = useSelector(
     wellContentsSelectors.getAllWellContentsForActiveItem
   )
-  const containerWidth = tab === 'startingDeck' ? '100vw' : '75vh'
+  const containerWidth = tab === 'startingDeck' ? '100vw' : '75vw'
+  console.log('containerWidth', containerWidth)
   const paddingLeftWithHover =
     hoverSlot == null
-      ? `calc((${containerWidth} - (${SPACING.spacing24}  * 2) - ${OFFDECK_MAP_WIDTH}) / 2)`
+      ? `calc((${containerWidth} - (${SPACING.spacing24}  * 2) - ${OFF_DECK_MAP_WIDTH}) / 2)`
       : SPACING.spacing24
   const paddingLeft = tab === 'startingDeck' ? paddingLeftWithHover : undefined
   const padding =
     tab === 'protocolSteps'
       ? SPACING.spacing24
-      : `${SPACING.spacing24} ${paddingLeft}`
-  const stepDetailsContainerWidth = `calc(((${containerWidth} - ${OFFDECK_MAP_WIDTH}) / 2) - (${SPACING.spacing24}  * 3))`
+      : `${SPACING.spacing40} ${paddingLeft}`
+  const stepDetailsContainerWidth = `calc(((${containerWidth} - ${OFF_DECK_MAP_WIDTH}) / 2) - (${SPACING.spacing24}  * 3))`
 
   return (
     <Flex
       backgroundColor={COLORS.white}
       borderRadius={BORDERS.borderRadius12}
       width="100%"
-      height="65vh"
+      height="100%"
+      // height="65vh"
       padding={padding}
       gridGap={SPACING.spacing24}
       alignItems={ALIGN_CENTER}
+      id="container"
     >
       {hoverSlot != null ? (
         <Flex width={stepDetailsContainerWidth} height="6.25rem">
@@ -85,27 +94,54 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
         </Flex>
       ) : null}
       <Flex
-        width={OFFDECK_MAP_WIDTH}
-        height="100%"
+        flex="0 0 auto"
+        width={OFF_DECK_MAP_WIDTH}
+        // height="100%"
+        height={OFF_DECK_MAP_HEIGHT}
+        alignItems={ALIGN_CENTER}
         borderRadius={SPACING.spacing12}
         padding={`${SPACING.spacing16} ${SPACING.spacing40}`}
         backgroundColor={COLORS.grey20}
         overflowY={OVERFLOW_AUTO}
         flexDirection={DIRECTION_COLUMN}
-        flex="0 0 auto"
+        gridGap={SPACING.spacing40}
+        id="grey box"
       >
         <Flex
           justifyContent={JUSTIFY_CENTER}
           width="100%"
           color={COLORS.grey60}
-          marginBottom={SPACING.spacing40}
         >
           <StyledText desktopStyle="bodyDefaultSemiBold">
             {i18n.format(t('off_deck_labware'), 'upperCase')}
           </StyledText>
         </Flex>
 
-        <Flex flexWrap={WRAP} paddingY={SPACING.spacing32}>
+        {/* <Flex
+          flexWrap={WRAP}
+          id="wrapper"
+          columnGap={SPACING.spacing32}
+          rowGap={SPACING.spacing40}
+          // gap={`${SPACING.spacing40} ${SPACING.spacing32}`}
+          justifyContent={JUSTIFY_START}
+          alignItems={ALIGN_STRETCH}
+        > */}
+        <LabwareWrapper
+          // justifyContent={
+          //   offDeckLabware.length < 3 ? JUSTIFY_CENTER : JUSTIFY_START
+          // }
+          id="LabwareWrapper"
+        >
+          {tab === 'startingDeck' ? (
+            <Flex width="9.5625rem" height="6.375rem">
+              <EmptySelectorButton
+                onClick={addLabware}
+                text={t('add_labware')}
+                textAlignment="middle"
+                iconName="plus"
+              />
+            </Flex>
+          ) : null}
           {offDeckLabware.map(lw => {
             const wellContents = allWellContentsForActiveItem
               ? allWellContentsForActiveItem[lw.id]
@@ -123,13 +159,12 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
             const highlighted = hoveredDropdownItem.id === lw.id
             return (
               <Flex
+                id={lw.id}
                 flexDirection={DIRECTION_COLUMN}
                 key={lw.id}
-                paddingRight={SPACING.spacing32}
+                // paddingRight={SPACING.spacing32}
                 paddingBottom={
-                  isLabwareSelectionSelected || highlighted
-                    ? '0px'
-                    : SPACING.spacing32
+                  isLabwareSelectionSelected || highlighted ? '0px' : '0px'
                 }
               >
                 <RobotWorkSpace
@@ -188,8 +223,8 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
 
           <HighlightOffdeckSlot position={ZERO_SLOT_POSITION} />
 
-          {tab === 'startingDeck' ? (
-            <Flex width="9.5625rem" height="6.375rem">
+          {/* {tab === 'startingDeck' ? (
+            <Flex width="9.5625rem" height="6.375rem" id="add button">
               <EmptySelectorButton
                 onClick={addLabware}
                 text={t('add_labware')}
@@ -197,9 +232,35 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
                 iconName="plus"
               />
             </Flex>
-          ) : null}
-        </Flex>
+          ) : null} */}
+        </LabwareWrapper>
       </Flex>
     </Flex>
   )
 }
+
+// const LabwareWrapper = styled(Flex)`
+//   /* flex: 0 0 auto; */
+//   flex-wrap: ${WRAP};
+//   column-gap: ${SPACING.spacing32};
+//   row-gap: ${SPACING.spacing40};
+//   justify-content: ${JUSTIFY_CENTER};
+//   align-items: ${ALIGN_STRETCH};
+
+//   & > :last-child {
+//     justify-content: ${JUSTIFY_START};
+//   }
+// `
+
+const LabwareWrapper = styled(Box)`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(9.5625rem, 1fr));
+  row-gap: ${SPACING.spacing40};
+  column-gap: ${SPACING.spacing32};
+  justify-content: ${JUSTIFY_CENTER}; /* Center the grid within the container */
+  align-items: ${ALIGN_START};
+  width: 100%;
+  // Note(kk: 1/30/2025) this padding is to add space to the right edge and the left edge of the grid
+  // this is not a perfect solution, but it works for now
+  padding: 0 ${SPACING.spacing24};
+`
diff --git a/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx b/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx
index 7f3cb7deec1..4cc916413ef 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx
+++ b/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx
@@ -27,6 +27,10 @@ import type { DeckSetupTabType } from '../types'
 
 const STANDARD_X_WIDTH = '127.76px'
 const STANDARD_Y_HEIGHT = '85.48px'
+const VIEW_BOX = `-25 -32 182.5142857143 122.1142857143`
+const OFF_DECK_CONTAINER_WIDTH = '39.4275rem'
+const OFF_DECK_CONTAINER_HEIGHT = '32.125rem'
+const SIZE_ADJUSTMENT = 0.7
 
 export function OffDeck(props: DeckSetupTabType): JSX.Element {
   const { tab } = props
@@ -47,30 +51,49 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element {
   const offDeckLabware =
     selectedLabwareDefUri != null ? defs[selectedLabwareDefUri] ?? null : null
 
+  // let labware = (
+  //   <RobotWorkSpace key="emptyState" viewBox={VIEW_BOX}>
+  //     {() => (
+  //       <RobotCoordsForeignDiv>
+  //         <Box
+  //           backgroundColor={COLORS.grey40}
+  //           borderRadius={BORDERS.borderRadius8}
+  //           width={STANDARD_X_WIDTH}
+  //           height={STANDARD_Y_HEIGHT}
+  //         />
+  //       </RobotCoordsForeignDiv>
+  //     )}
+  //   </RobotWorkSpace>
+  // )
+
   let labware = (
-    <RobotWorkSpace
-      key="emptyState"
-      viewBox={`-25 -32 182.5142857143 122.1142857143`}
-    >
+    <RobotWorkSpace key="emptyState" viewBox={VIEW_BOX}>
       {() => (
-        <RobotCoordsForeignDiv>
-          <Box
-            backgroundColor={COLORS.grey40}
-            borderRadius={BORDERS.borderRadius8}
-            width={STANDARD_X_WIDTH}
-            height={STANDARD_Y_HEIGHT}
-          />
-        </RobotCoordsForeignDiv>
+        <RobotCoordsForeignDiv
+          x={-25}
+          y={-32}
+          innerDivProps={{
+            style: {
+              width: '100%',
+              height: '100%',
+              backgroundColor: COLORS.grey40,
+              borderRadius: BORDERS.borderRadius8,
+            },
+          }}
+        />
       )}
     </RobotWorkSpace>
   )
+
+  console.log(hoveredLabwareDef?.dimensions)
+
   if (hoveredLabwareDef != null && hoveredLabwareDef !== offDeckLabware) {
     labware = (
       <RobotWorkSpace
         key={hoveredLabwareDef.parameters.loadName}
-        viewBox={`-25 -32 ${hoveredLabwareDef.dimensions.xDimension / 0.7} ${
-          hoveredLabwareDef.dimensions.yDimension / 0.7
-        }`}
+        viewBox={`-25 -32 ${
+          hoveredLabwareDef.dimensions.xDimension / SIZE_ADJUSTMENT
+        } ${hoveredLabwareDef.dimensions.yDimension / SIZE_ADJUSTMENT}`}
       >
         {() => (
           <>
@@ -87,11 +110,13 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element {
     )
   } else if (offDeckLabware != null) {
     const def = offDeckLabware
+
+    console.log('offDeckLabware', offDeckLabware)
     labware = (
       <RobotWorkSpace
         key={def.parameters.loadName}
-        viewBox={`-25 -32 ${def.dimensions.xDimension / 0.7} ${
-          def.dimensions.yDimension / 0.7
+        viewBox={`-25 -32 ${def.dimensions.xDimension / SIZE_ADJUSTMENT} ${
+          def.dimensions.yDimension / SIZE_ADJUSTMENT
         }`}
       >
         {() => (
@@ -110,59 +135,47 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element {
     )
   }
 
+  console.log('selectedSlot', selectedSlot)
+
   return (
     <Flex width="100%">
       {selectedSlot.slot === 'offDeck' ? (
         <Flex
           alignItems={ALIGN_CENTER}
           width="100%"
-          padding={SPACING.spacing12}
-          gridGap={SPACING.spacing12}
+          gridGap={SPACING.spacing10}
         >
           <Flex justifyContent={JUSTIFY_CENTER} width="100%">
             <Flex
-              width="39.4275rem"
-              height="32.125rem"
+              width={OFF_DECK_CONTAINER_WIDTH}
+              height={OFF_DECK_CONTAINER_HEIGHT}
               justifyContent={JUSTIFY_CENTER}
               alignItems={ALIGN_CENTER}
               borderRadius={BORDERS.borderRadius8}
               backgroundColor={COLORS.white}
+              id="whiteBox"
+              padding={`${SPACING.spacing40} ${SPACING.spacing60} ${SPACING.spacing80}`}
+              flexDirection={DIRECTION_COLUMN}
+              gridGap={SPACING.spacing32}
             >
-              <Flex
-                padding={SPACING.spacing60}
-                width="100%"
-                height="100%"
-                flexDirection={DIRECTION_COLUMN}
-              >
-                <Flex
-                  justifyContent={JUSTIFY_CENTER}
-                  width="100%"
-                  color={COLORS.grey60}
-                  marginBottom={SPACING.spacing40}
-                >
-                  <StyledText desktopStyle="bodyDefaultSemiBold">
-                    {i18n.format(t('off_deck_labware'), 'upperCase')}
-                  </StyledText>
-                </Flex>
-                <Flex
-                  width="510.84px"
-                  height="342px"
-                  alignItems="center"
-                  justifyContent="center"
-                >
-                  {labware}
-                </Flex>
+              <StyledText desktopStyle="bodyDefaultSemiBold">
+                {i18n.format(t('off_deck_labware'), 'upperCase')}
+              </StyledText>
+              <Flex width="100%" height="100%">
+                {labware}
               </Flex>
             </Flex>
           </Flex>
-          <DeckSetupTools
-            position={POSITION_RELATIVE}
-            onDeckProps={null}
-            setHoveredLabware={setHoveredLabware}
-            onCloseClick={() => {
-              dispatch(selectZoomedIntoSlot({ slot: null, cutout: null }))
-            }}
-          />
+          <Flex padding={SPACING.spacing12}>
+            <DeckSetupTools
+              position={POSITION_RELATIVE}
+              onDeckProps={null}
+              setHoveredLabware={setHoveredLabware}
+              onCloseClick={() => {
+                dispatch(selectZoomedIntoSlot({ slot: null, cutout: null }))
+              }}
+            />
+          </Flex>
         </Flex>
       ) : (
         <OffDeckDetails
diff --git a/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx b/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx
index 54edbf8e9ac..43f7467ea92 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx
+++ b/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx
@@ -5,7 +5,7 @@ import { selectors } from '../../../../labware-ingred/selectors'
 import { getCustomLabwareDefsByURI } from '../../../../labware-defs/selectors'
 import { renderWithProviders } from '../../../../__testing-utils__'
 import { OffDeckDetails } from '../OffDeckDetails'
-import { OffDeck } from '../Offdeck'
+import { OffDeck } from '../OffDeck'
 import type * as Components from '@opentrons/components'
 
 vi.mock('../OffDeckDetails')
diff --git a/protocol-designer/src/pages/Designer/Offdeck/index.ts b/protocol-designer/src/pages/Designer/Offdeck/index.ts
index 0ca8caf1f01..9d1b9daac86 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/index.ts
+++ b/protocol-designer/src/pages/Designer/Offdeck/index.ts
@@ -1 +1 @@
-export * from './Offdeck'
+export * from './OffDeck'
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
index 210abdec6ba..f1f66879c41 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/DraggableSidebar.tsx
@@ -10,7 +10,7 @@ import {
 } from '@opentrons/components'
 import { TimelineToolbox } from './Timeline/TimelineToolbox'
 
-const INITIAL_SIDEBAR_WIDTH = 276
+const INITIAL_SIDEBAR_WIDTH = 235
 const MIN_SIDEBAR_WIDTH = 80
 const MAX_SIDEBAR_WIDTH = 350
 
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 31f9235f54a..bee9f3e1234 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -43,7 +43,7 @@ import {
 import { TimelineAlerts } from '../../../organisms'
 import { DraggableSidebar } from './DraggableSidebar'
 
-const CONTENT_MAX_WIDTH = '44.6704375rem'
+const CONTENT_MAX_WIDTH = '46.9375rem'
 
 export function ProtocolSteps(): JSX.Element {
   const { i18n, t } = useTranslation('starting_deck_state')
@@ -52,7 +52,7 @@ export function ProtocolSteps(): JSX.Element {
   const hoveredTerminalItem = useSelector(getHoveredTerminalItemId)
   const isMultiSelectMode = useSelector(getIsMultiSelectMode)
   const selectedSubstep = useSelector(getSelectedSubstep)
-  const enableHoyKeyDisplay = useSelector(getEnableHotKeysDisplay)
+  const enableHotKeyDisplay = useSelector(getEnableHotKeysDisplay)
   const tab = useSelector(getDesignerTab)
   const leftString = t('onDeck')
   const rightString = t('offDeck')
@@ -82,27 +82,34 @@ export function ProtocolSteps(): JSX.Element {
     <Flex
       backgroundColor={COLORS.grey10}
       height="calc(100vh - 4rem)"
-      minHeight={FLEX_MAX_CONTENT}
+      // minHeight={FLEX_MAX_CONTENT}
+      // minHeight="100%"
       width="100%"
-      padding={SPACING.spacing12}
-      gridGap={SPACING.spacing16}
+
+      // gridGap={SPACING.spacing16}
     >
-      <Flex flex="1" height="100%">
+      <Flex height="100%" padding={SPACING.spacing12}>
         <DraggableSidebar setTargetWidth={setTargetWidth} />
       </Flex>
       <Flex
+        id="main flex"
         alignItems={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
         flex="2.85"
         paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
-        position={POSITION_RELATIVE}
-        backgroundColor={COLORS.red40}
+        // position={POSITION_RELATIVE}
+        paddingX="1.75rem"
+        height="100%"
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
-          gridGap={SPACING.spacing16}
+          gridGap={SPACING.spacing24}
+          // width="100%"
           width={CONTENT_MAX_WIDTH}
+          id="bigger flex"
+          height="100%"
+          justifyContent={JUSTIFY_CENTER}
         >
           {showTimelineAlerts ? (
             <TimelineAlerts
@@ -112,7 +119,10 @@ export function ProtocolSteps(): JSX.Element {
               gridGap={SPACING.spacing4}
             />
           ) : null}
-          <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
+          <Flex
+            justifyContent={JUSTIFY_SPACE_BETWEEN}
+            alignItems={ALIGN_CENTER}
+          >
             {currentStep != null && hoveredTerminalItem == null ? (
               <StyledText desktopStyle="headingSmallBold">
                 {i18n.format(currentStep.stepName, 'capitalize')}
@@ -137,7 +147,11 @@ export function ProtocolSteps(): JSX.Element {
               }}
             />
           </Flex>
-          <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
+          <Flex
+            flexDirection={DIRECTION_COLUMN}
+            gridGap={SPACING.spacing16}
+            id="container for deck setup"
+          >
             {deckView === leftString ? (
               <DeckSetupContainer tab="protocolSteps" />
             ) : (
@@ -151,7 +165,7 @@ export function ProtocolSteps(): JSX.Element {
             ) : null}
           </Flex>
         </Flex>
-        {enableHoyKeyDisplay ? (
+        {enableHotKeyDisplay ? (
           <Flex
             position={POSITION_FIXED}
             left={`calc(1.5rem + ${targetWidth}px)`}
@@ -180,7 +194,10 @@ export function ProtocolSteps(): JSX.Element {
       {formData == null && selectedSubstep ? (
         <SubStepsToolbox stepId={selectedSubstep} />
       ) : null}
-      <StepForm />
+      <Flex padding={SPACING.spacing12}>
+        <StepForm />
+      </Flex>
+
       {isMultiSelectMode ? <BatchEditToolbox /> : null}
     </Flex>
   )
diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
index e11079261ab..ca2c93280e5 100644
--- a/protocol-designer/src/pages/Designer/index.tsx
+++ b/protocol-designer/src/pages/Designer/index.tsx
@@ -4,11 +4,13 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import {
   ALIGN_END,
+  ALIGN_STRETCH,
   COLORS,
   DIRECTION_COLUMN,
   FLEX_MAX_CONTENT,
   Flex,
   INFO_TOAST,
+  JUSTIFY_FLEX_END,
   SPACING,
   ToggleGroup,
   useOnClickOutside,
@@ -126,7 +128,9 @@ export function Designer(): JSX.Element {
 
   const deckViewItems =
     deckView === leftString ? (
-      <DeckSetupContainer tab={tab} />
+      <Flex height="100%" width="100%" css={{ outline: 'solid 1px red' }}>
+        <DeckSetupContainer tab={tab} />
+      </Flex>
     ) : (
       <OffDeck tab={tab} />
     )
@@ -159,7 +163,11 @@ export function Designer(): JSX.Element {
           }}
         />
       ) : null}
-      <Flex flexDirection={DIRECTION_COLUMN} minHeight={FLEX_MAX_CONTENT}>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        // minHeight={FLEX_MAX_CONTENT}
+        height="100%"
+      >
         <DesignerNavigation
           hasZoomInSlot={zoomIn.slot != null || zoomIn.cutout != null}
           hasTrashEntity={hasTrashEntity}
@@ -178,16 +186,24 @@ export function Designer(): JSX.Element {
                 : `${SPACING.spacing60} ${SPACING.spacing40}`
             }
             // height="calc(100vh - 64px)"
+            height="100%"
+            id="outer flex"
           >
             <Flex
               flexDirection={DIRECTION_COLUMN}
               gridGap={SPACING.spacing24}
-              // height="100%"
-              backgroundColor={COLORS.red40}
-              css={{ outline: 'solid 1px green' }}
+              height="100%"
+              // backgroundColor="red"
+              // css={{ outline: 'solid 2px green' }}
             >
               {zoomIn.slot == null ? (
-                <Flex alignSelf={ALIGN_END}>
+                <Flex
+                  justifyContent={JUSTIFY_FLEX_END}
+                  alignSelf={ALIGN_STRETCH}
+                  // backgroundColor={COLORS.yellow35}
+                  width="100%"
+                  // css={{ outline: 'solid 1px purple' }}
+                >
                   <ToggleGroup
                     selectedValue={deckView}
                     leftText={leftString}

From 65dfe2a4b28613b19242888fb7f67ef8d0b05c52 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 31 Jan 2025 11:17:58 -0500
Subject: [PATCH 03/11] fix test errors from the file path modification

---
 .../src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx     | 2 +-
 protocol-designer/src/pages/Designer/Offdeck/index.ts         | 1 -
 .../src/pages/Designer/Offdeck/{Offdeck.tsx => index.tsx}     | 0
 .../Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx   | 4 ++--
 protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx  | 2 +-
 protocol-designer/src/pages/Designer/index.tsx                | 2 +-
 6 files changed, 5 insertions(+), 6 deletions(-)
 delete mode 100644 protocol-designer/src/pages/Designer/Offdeck/index.ts
 rename protocol-designer/src/pages/Designer/Offdeck/{Offdeck.tsx => index.tsx} (100%)

diff --git a/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx b/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx
index 43f7467ea92..11bea47d9d0 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx
+++ b/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx
@@ -5,7 +5,7 @@ import { selectors } from '../../../../labware-ingred/selectors'
 import { getCustomLabwareDefsByURI } from '../../../../labware-defs/selectors'
 import { renderWithProviders } from '../../../../__testing-utils__'
 import { OffDeckDetails } from '../OffDeckDetails'
-import { OffDeck } from '../OffDeck'
+import { OffDeck } from '..'
 import type * as Components from '@opentrons/components'
 
 vi.mock('../OffDeckDetails')
diff --git a/protocol-designer/src/pages/Designer/Offdeck/index.ts b/protocol-designer/src/pages/Designer/Offdeck/index.ts
deleted file mode 100644
index 9d1b9daac86..00000000000
--- a/protocol-designer/src/pages/Designer/Offdeck/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './OffDeck'
diff --git a/protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx b/protocol-designer/src/pages/Designer/Offdeck/index.tsx
similarity index 100%
rename from protocol-designer/src/pages/Designer/Offdeck/Offdeck.tsx
rename to protocol-designer/src/pages/Designer/Offdeck/index.tsx
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
index 31c1c93eafc..d333baf288d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
@@ -18,14 +18,14 @@ import {
 } from '../../../../file-data/selectors'
 import { getEnableHotKeysDisplay } from '../../../../feature-flags/selectors'
 import { DeckSetupContainer } from '../../DeckSetup'
-import { OffDeck } from '../../Offdeck'
+import { OffDeck } from '../../OffDeck'
 import { SubStepsToolbox } from '../Timeline'
 import { DraggableSidebar } from '../DraggableSidebar'
 import { ProtocolSteps } from '..'
 
 import type { SavedStepFormState } from '../../../../step-forms'
 
-vi.mock('../../Offdeck')
+vi.mock('../../OffDeck')
 vi.mock('../../../../step-forms/selectors')
 vi.mock('../../../../ui/steps/selectors')
 vi.mock('../../../../ui/labware/selectors')
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index bee9f3e1234..92745e965ba 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -31,7 +31,7 @@ import {
   getHoveredTerminalItemId,
 } from '../../../ui/steps/selectors'
 import { DeckSetupContainer } from '../DeckSetup'
-import { OffDeck } from '../Offdeck'
+import { OffDeck } from '../OffDeck'
 import { SubStepsToolbox } from './Timeline'
 import { StepForm } from './StepForm'
 import { StepSummary } from './StepSummary'
diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
index ca2c93280e5..f194dae983f 100644
--- a/protocol-designer/src/pages/Designer/index.tsx
+++ b/protocol-designer/src/pages/Designer/index.tsx
@@ -27,7 +27,7 @@ import { selectDesignerTab } from '../../file-data/actions'
 import { getDesignerTab, getFileMetadata } from '../../file-data/selectors'
 import { DeckSetupContainer } from './DeckSetup'
 import { selectors } from '../../labware-ingred/selectors'
-import { OffDeck } from './Offdeck'
+import { OffDeck } from './OffDeck'
 import { LiquidsOverflowMenu } from './LiquidsOverflowMenu'
 import { ProtocolSteps } from './ProtocolSteps'
 

From 2e22d979f15eacd26fec841a9d21cd6685e6298a Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Fri, 31 Jan 2025 11:53:24 -0500
Subject: [PATCH 04/11] Update OffDeckDetails.tsx

---
 .../src/pages/Designer/Offdeck/OffDeckDetails.tsx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
index 99191e50c62..a0b70e381e9 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
+++ b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import {
   ALIGN_CENTER,
   ALIGN_START,
-  ALIGN_STRETCH,
+  // ALIGN_STRETCH,
   BORDERS,
   Box,
   COLORS,
@@ -13,13 +13,13 @@ import {
   EmptySelectorButton,
   Flex,
   JUSTIFY_CENTER,
-  JUSTIFY_START,
+  // JUSTIFY_START,
   LabwareRender,
   OVERFLOW_AUTO,
   RobotWorkSpace,
   SPACING,
   StyledText,
-  WRAP,
+  // WRAP,
 } from '@opentrons/components'
 import * as wellContentsSelectors from '../../../top-selectors/well-contents'
 import { selectors } from '../../../labware-ingred/selectors'

From a712f68108027b394069fb39d255ce9fc770a949 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 3 Feb 2025 18:24:51 -0500
Subject: [PATCH 05/11] fix deck view position

---
 .../Designer/DeckSetup/DeckSetupContainer.tsx |  51 ++++----
 .../pages/Designer/Offdeck/OffDeckDetails.tsx |  60 ++-------
 .../src/pages/Designer/Offdeck/index.tsx      | 119 ++++++++----------
 .../pages/Designer/ProtocolSteps/index.tsx    |  14 +--
 .../src/pages/Designer/index.tsx              |  22 ++--
 5 files changed, 100 insertions(+), 166 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
index 9a43ee7232d..c9c351aebb1 100644
--- a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
+++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx
@@ -6,15 +6,15 @@ import {
   BORDERS,
   Box,
   COLORS,
-  DIRECTION_COLUMN,
   DeckFromLayers,
+  DIRECTION_COLUMN,
   Flex,
   FlexTrash,
   JUSTIFY_CENTER,
   RobotCoordinateSpaceWithRef,
-  SPACING,
   SingleSlotFixture,
   SlotLabels,
+  SPACING,
   StagingAreaFixture,
   WasteChuteFixture,
   WasteChuteStagingAreaFixture,
@@ -59,6 +59,9 @@ import type { Fixture } from './constants'
 
 const WASTE_CHUTE_SPACE = 30
 const DETAILS_HOVER_SPACE = 60
+// Note (02/02/25:kk) the size is different from the design but the product team requested keep the current size
+const STARTING_DECK_VIEW_MIN_WIDTH = '75%'
+
 const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
   'calibrationMarkings',
   'fixedBase',
@@ -213,24 +216,24 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
     aa => isAddressableAreaStandardSlot(aa.id, deckDef)
   )
 
-  // console.log('ViewBox Adjusted:', viewBoxAdjusted)
-  // console.log('ViewBox Numerical:', viewBoxNumerical)
-  // console.log('Deck Map Ratio:', deckMapRatio)
-  // console.log('viewBox', viewBox)
+  let containerPadding = '0'
+  if (!isZoomed) {
+    if (tab === 'startingDeck') {
+      containerPadding = SPACING.spacing40
+    } else {
+      containerPadding = SPACING.spacing60
+    }
+  }
 
   return (
-    // <Flex height="100%" css={{ outline: 'solid 1px red' }}>
     <>
       <Flex
         backgroundColor={COLORS.white}
         borderRadius={BORDERS.borderRadius12}
         width="100%"
-        // height={tab === 'protocolSteps' ? '65.75vh' : '100%'}
-        // height="65.75vh"
         height="100%"
         flexDirection={DIRECTION_COLUMN}
-        padding={isZoomed ? '0' : SPACING.spacing40}
-        id="deck setup top flex"
+        padding={containerPadding}
       >
         <Flex
           width="100%"
@@ -238,35 +241,35 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
           alignItems={ALIGN_CENTER}
           justifyContent={JUSTIFY_CENTER}
           gridGap={SPACING.spacing12}
-          id="svg flex"
         >
-          {zoomIn.slot == null ? (
-            <Flex justifyContent={JUSTIFY_CENTER}>
+          {zoomIn.slot == null && tab === 'startingDeck' ? (
+            <Box width="20%">
               {hoverSlot != null &&
               breakPointSize !== 'small' &&
               LEFT_SLOTS.includes(hoverSlot) ? (
                 <SlotDetailsContainer robotType={robotType} slot={hoverSlot} />
               ) : null}
-            </Flex>
+            </Box>
           ) : null}
-          <Flex width="100%" height="100%" id="before robot coordinate space">
+          <Flex
+            width="100%"
+            height="100%"
+            alignItems={ALIGN_CENTER}
+            justifyContent={JUSTIFY_CENTER}
+          >
             <RobotCoordinateSpaceWithRef
               height="100%"
               width={
                 zoomIn.slot != null || tab === 'protocolSteps' ? '100%' : '50%'
               }
-              minWidth={tab === 'protocolSteps' ? 'auto' : '30rem'}
+              minWidth={
+                tab === 'protocolSteps' ? 'auto' : STARTING_DECK_VIEW_MIN_WIDTH
+              }
               deckDef={deckDef}
               viewBox={viewBoxAdjusted}
               outline="auto"
               zoomed={zoomIn.slot != null}
               borderRadius={BORDERS.borderRadius12}
-              style={{
-                // marginLeft: SPACING.spacing16,
-                transform: `translateX(${
-                  deckDef?.cornerOffsetFromOrigin[0] * -0.2
-                }px) scale(1, -1)`,
-              }}
             >
               {() => (
                 <>
@@ -394,7 +397,7 @@ export function DeckSetupContainer(props: DeckSetupTabType): JSX.Element {
               )}
             </RobotCoordinateSpaceWithRef>
           </Flex>
-          {zoomIn.slot == null ? (
+          {zoomIn.slot == null && tab === 'startingDeck' ? (
             <Box width="20%">
               {hoverSlot != null &&
               breakPointSize !== 'small' &&
diff --git a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
index a0b70e381e9..b062915271c 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
+++ b/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
@@ -5,7 +5,6 @@ import styled from 'styled-components'
 import {
   ALIGN_CENTER,
   ALIGN_START,
-  // ALIGN_STRETCH,
   BORDERS,
   Box,
   COLORS,
@@ -13,13 +12,11 @@ import {
   EmptySelectorButton,
   Flex,
   JUSTIFY_CENTER,
-  // JUSTIFY_START,
   LabwareRender,
   OVERFLOW_AUTO,
   RobotWorkSpace,
   SPACING,
   StyledText,
-  // WRAP,
 } from '@opentrons/components'
 import * as wellContentsSelectors from '../../../top-selectors/well-contents'
 import { selectors } from '../../../labware-ingred/selectors'
@@ -39,6 +36,7 @@ import type { DeckSetupTabType } from '../types'
 
 const OFF_DECK_MAP_WIDTH = '41.625rem'
 const OFF_DECK_MAP_HEIGHT = '45.5rem'
+const OFF_DECK_MAP_HEIGHT_FOR_STEP = '31.4rem'
 const ZERO_SLOT_POSITION: CoordinateTuple = [0, 0, 0]
 interface OffDeckDetailsProps extends DeckSetupTabType {
   addLabware: () => void
@@ -60,7 +58,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
     wellContentsSelectors.getAllWellContentsForActiveItem
   )
   const containerWidth = tab === 'startingDeck' ? '100vw' : '75vw'
-  console.log('containerWidth', containerWidth)
+
   const paddingLeftWithHover =
     hoverSlot == null
       ? `calc((${containerWidth} - (${SPACING.spacing24}  * 2) - ${OFF_DECK_MAP_WIDTH}) / 2)`
@@ -78,11 +76,10 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
       borderRadius={BORDERS.borderRadius12}
       width="100%"
       height="100%"
-      // height="65vh"
       padding={padding}
       gridGap={SPACING.spacing24}
       alignItems={ALIGN_CENTER}
-      id="container"
+      justifyContent={JUSTIFY_CENTER}
     >
       {hoverSlot != null ? (
         <Flex width={stepDetailsContainerWidth} height="6.25rem">
@@ -96,8 +93,11 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
       <Flex
         flex="0 0 auto"
         width={OFF_DECK_MAP_WIDTH}
-        // height="100%"
-        height={OFF_DECK_MAP_HEIGHT}
+        height={
+          tab === 'startingDeck'
+            ? OFF_DECK_MAP_HEIGHT
+            : OFF_DECK_MAP_HEIGHT_FOR_STEP
+        }
         alignItems={ALIGN_CENTER}
         borderRadius={SPACING.spacing12}
         padding={`${SPACING.spacing16} ${SPACING.spacing40}`}
@@ -105,7 +105,6 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
         overflowY={OVERFLOW_AUTO}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing40}
-        id="grey box"
       >
         <Flex
           justifyContent={JUSTIFY_CENTER}
@@ -116,22 +115,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
             {i18n.format(t('off_deck_labware'), 'upperCase')}
           </StyledText>
         </Flex>
-
-        {/* <Flex
-          flexWrap={WRAP}
-          id="wrapper"
-          columnGap={SPACING.spacing32}
-          rowGap={SPACING.spacing40}
-          // gap={`${SPACING.spacing40} ${SPACING.spacing32}`}
-          justifyContent={JUSTIFY_START}
-          alignItems={ALIGN_STRETCH}
-        > */}
-        <LabwareWrapper
-          // justifyContent={
-          //   offDeckLabware.length < 3 ? JUSTIFY_CENTER : JUSTIFY_START
-          // }
-          id="LabwareWrapper"
-        >
+        <LabwareWrapper>
           {tab === 'startingDeck' ? (
             <Flex width="9.5625rem" height="6.375rem">
               <EmptySelectorButton
@@ -162,7 +146,6 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
                 id={lw.id}
                 flexDirection={DIRECTION_COLUMN}
                 key={lw.id}
-                // paddingRight={SPACING.spacing32}
                 paddingBottom={
                   isLabwareSelectionSelected || highlighted ? '0px' : '0px'
                 }
@@ -220,38 +203,13 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
               </Flex>
             )
           })}
-
           <HighlightOffdeckSlot position={ZERO_SLOT_POSITION} />
-
-          {/* {tab === 'startingDeck' ? (
-            <Flex width="9.5625rem" height="6.375rem" id="add button">
-              <EmptySelectorButton
-                onClick={addLabware}
-                text={t('add_labware')}
-                textAlignment="middle"
-                iconName="plus"
-              />
-            </Flex>
-          ) : null} */}
         </LabwareWrapper>
       </Flex>
     </Flex>
   )
 }
 
-// const LabwareWrapper = styled(Flex)`
-//   /* flex: 0 0 auto; */
-//   flex-wrap: ${WRAP};
-//   column-gap: ${SPACING.spacing32};
-//   row-gap: ${SPACING.spacing40};
-//   justify-content: ${JUSTIFY_CENTER};
-//   align-items: ${ALIGN_STRETCH};
-
-//   & > :last-child {
-//     justify-content: ${JUSTIFY_START};
-//   }
-// `
-
 const LabwareWrapper = styled(Box)`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(9.5625rem, 1fr));
diff --git a/protocol-designer/src/pages/Designer/Offdeck/index.tsx b/protocol-designer/src/pages/Designer/Offdeck/index.tsx
index 4cc916413ef..7f3cb7deec1 100644
--- a/protocol-designer/src/pages/Designer/Offdeck/index.tsx
+++ b/protocol-designer/src/pages/Designer/Offdeck/index.tsx
@@ -27,10 +27,6 @@ import type { DeckSetupTabType } from '../types'
 
 const STANDARD_X_WIDTH = '127.76px'
 const STANDARD_Y_HEIGHT = '85.48px'
-const VIEW_BOX = `-25 -32 182.5142857143 122.1142857143`
-const OFF_DECK_CONTAINER_WIDTH = '39.4275rem'
-const OFF_DECK_CONTAINER_HEIGHT = '32.125rem'
-const SIZE_ADJUSTMENT = 0.7
 
 export function OffDeck(props: DeckSetupTabType): JSX.Element {
   const { tab } = props
@@ -51,49 +47,30 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element {
   const offDeckLabware =
     selectedLabwareDefUri != null ? defs[selectedLabwareDefUri] ?? null : null
 
-  // let labware = (
-  //   <RobotWorkSpace key="emptyState" viewBox={VIEW_BOX}>
-  //     {() => (
-  //       <RobotCoordsForeignDiv>
-  //         <Box
-  //           backgroundColor={COLORS.grey40}
-  //           borderRadius={BORDERS.borderRadius8}
-  //           width={STANDARD_X_WIDTH}
-  //           height={STANDARD_Y_HEIGHT}
-  //         />
-  //       </RobotCoordsForeignDiv>
-  //     )}
-  //   </RobotWorkSpace>
-  // )
-
   let labware = (
-    <RobotWorkSpace key="emptyState" viewBox={VIEW_BOX}>
+    <RobotWorkSpace
+      key="emptyState"
+      viewBox={`-25 -32 182.5142857143 122.1142857143`}
+    >
       {() => (
-        <RobotCoordsForeignDiv
-          x={-25}
-          y={-32}
-          innerDivProps={{
-            style: {
-              width: '100%',
-              height: '100%',
-              backgroundColor: COLORS.grey40,
-              borderRadius: BORDERS.borderRadius8,
-            },
-          }}
-        />
+        <RobotCoordsForeignDiv>
+          <Box
+            backgroundColor={COLORS.grey40}
+            borderRadius={BORDERS.borderRadius8}
+            width={STANDARD_X_WIDTH}
+            height={STANDARD_Y_HEIGHT}
+          />
+        </RobotCoordsForeignDiv>
       )}
     </RobotWorkSpace>
   )
-
-  console.log(hoveredLabwareDef?.dimensions)
-
   if (hoveredLabwareDef != null && hoveredLabwareDef !== offDeckLabware) {
     labware = (
       <RobotWorkSpace
         key={hoveredLabwareDef.parameters.loadName}
-        viewBox={`-25 -32 ${
-          hoveredLabwareDef.dimensions.xDimension / SIZE_ADJUSTMENT
-        } ${hoveredLabwareDef.dimensions.yDimension / SIZE_ADJUSTMENT}`}
+        viewBox={`-25 -32 ${hoveredLabwareDef.dimensions.xDimension / 0.7} ${
+          hoveredLabwareDef.dimensions.yDimension / 0.7
+        }`}
       >
         {() => (
           <>
@@ -110,13 +87,11 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element {
     )
   } else if (offDeckLabware != null) {
     const def = offDeckLabware
-
-    console.log('offDeckLabware', offDeckLabware)
     labware = (
       <RobotWorkSpace
         key={def.parameters.loadName}
-        viewBox={`-25 -32 ${def.dimensions.xDimension / SIZE_ADJUSTMENT} ${
-          def.dimensions.yDimension / SIZE_ADJUSTMENT
+        viewBox={`-25 -32 ${def.dimensions.xDimension / 0.7} ${
+          def.dimensions.yDimension / 0.7
         }`}
       >
         {() => (
@@ -135,47 +110,59 @@ export function OffDeck(props: DeckSetupTabType): JSX.Element {
     )
   }
 
-  console.log('selectedSlot', selectedSlot)
-
   return (
     <Flex width="100%">
       {selectedSlot.slot === 'offDeck' ? (
         <Flex
           alignItems={ALIGN_CENTER}
           width="100%"
-          gridGap={SPACING.spacing10}
+          padding={SPACING.spacing12}
+          gridGap={SPACING.spacing12}
         >
           <Flex justifyContent={JUSTIFY_CENTER} width="100%">
             <Flex
-              width={OFF_DECK_CONTAINER_WIDTH}
-              height={OFF_DECK_CONTAINER_HEIGHT}
+              width="39.4275rem"
+              height="32.125rem"
               justifyContent={JUSTIFY_CENTER}
               alignItems={ALIGN_CENTER}
               borderRadius={BORDERS.borderRadius8}
               backgroundColor={COLORS.white}
-              id="whiteBox"
-              padding={`${SPACING.spacing40} ${SPACING.spacing60} ${SPACING.spacing80}`}
-              flexDirection={DIRECTION_COLUMN}
-              gridGap={SPACING.spacing32}
             >
-              <StyledText desktopStyle="bodyDefaultSemiBold">
-                {i18n.format(t('off_deck_labware'), 'upperCase')}
-              </StyledText>
-              <Flex width="100%" height="100%">
-                {labware}
+              <Flex
+                padding={SPACING.spacing60}
+                width="100%"
+                height="100%"
+                flexDirection={DIRECTION_COLUMN}
+              >
+                <Flex
+                  justifyContent={JUSTIFY_CENTER}
+                  width="100%"
+                  color={COLORS.grey60}
+                  marginBottom={SPACING.spacing40}
+                >
+                  <StyledText desktopStyle="bodyDefaultSemiBold">
+                    {i18n.format(t('off_deck_labware'), 'upperCase')}
+                  </StyledText>
+                </Flex>
+                <Flex
+                  width="510.84px"
+                  height="342px"
+                  alignItems="center"
+                  justifyContent="center"
+                >
+                  {labware}
+                </Flex>
               </Flex>
             </Flex>
           </Flex>
-          <Flex padding={SPACING.spacing12}>
-            <DeckSetupTools
-              position={POSITION_RELATIVE}
-              onDeckProps={null}
-              setHoveredLabware={setHoveredLabware}
-              onCloseClick={() => {
-                dispatch(selectZoomedIntoSlot({ slot: null, cutout: null }))
-              }}
-            />
-          </Flex>
+          <DeckSetupTools
+            position={POSITION_RELATIVE}
+            onDeckProps={null}
+            setHoveredLabware={setHoveredLabware}
+            onCloseClick={() => {
+              dispatch(selectZoomedIntoSlot({ slot: null, cutout: null }))
+            }}
+          />
         </Flex>
       ) : (
         <OffDeckDetails
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 92745e965ba..9bda8fa825e 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -82,32 +82,24 @@ export function ProtocolSteps(): JSX.Element {
     <Flex
       backgroundColor={COLORS.grey10}
       height="calc(100vh - 4rem)"
-      // minHeight={FLEX_MAX_CONTENT}
-      // minHeight="100%"
       width="100%"
-
-      // gridGap={SPACING.spacing16}
     >
       <Flex height="100%" padding={SPACING.spacing12}>
         <DraggableSidebar setTargetWidth={setTargetWidth} />
       </Flex>
       <Flex
-        id="main flex"
         alignItems={ALIGN_CENTER}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
         flex="2.85"
         paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
-        // position={POSITION_RELATIVE}
         paddingX="1.75rem"
         height="100%"
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
           gridGap={SPACING.spacing24}
-          // width="100%"
           width={CONTENT_MAX_WIDTH}
-          id="bigger flex"
           height="100%"
           justifyContent={JUSTIFY_CENTER}
         >
@@ -147,11 +139,7 @@ export function ProtocolSteps(): JSX.Element {
               }}
             />
           </Flex>
-          <Flex
-            flexDirection={DIRECTION_COLUMN}
-            gridGap={SPACING.spacing16}
-            id="container for deck setup"
-          >
+          <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
             {deckView === leftString ? (
               <DeckSetupContainer tab="protocolSteps" />
             ) : (
diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
index f194dae983f..5c0a4afcb6e 100644
--- a/protocol-designer/src/pages/Designer/index.tsx
+++ b/protocol-designer/src/pages/Designer/index.tsx
@@ -14,6 +14,8 @@ import {
   SPACING,
   ToggleGroup,
   useOnClickOutside,
+  JUSTIFY_CENTER,
+  ALIGN_CENTER,
 } from '@opentrons/components'
 import {
   selectDropdownItem,
@@ -128,7 +130,12 @@ export function Designer(): JSX.Element {
 
   const deckViewItems =
     deckView === leftString ? (
-      <Flex height="100%" width="100%" css={{ outline: 'solid 1px red' }}>
+      <Flex
+        height="100%"
+        width="100%"
+        justifyContent={JUSTIFY_CENTER}
+        alignItems={ALIGN_CENTER}
+      >
         <DeckSetupContainer tab={tab} />
       </Flex>
     ) : (
@@ -163,11 +170,7 @@ export function Designer(): JSX.Element {
           }}
         />
       ) : null}
-      <Flex
-        flexDirection={DIRECTION_COLUMN}
-        // minHeight={FLEX_MAX_CONTENT}
-        height="100%"
-      >
+      <Flex flexDirection={DIRECTION_COLUMN} height="100%">
         <DesignerNavigation
           hasZoomInSlot={zoomIn.slot != null || zoomIn.cutout != null}
           hasTrashEntity={hasTrashEntity}
@@ -185,24 +188,19 @@ export function Designer(): JSX.Element {
                 ? '0'
                 : `${SPACING.spacing60} ${SPACING.spacing40}`
             }
-            // height="calc(100vh - 64px)"
             height="100%"
-            id="outer flex"
+            width="100%"
           >
             <Flex
               flexDirection={DIRECTION_COLUMN}
               gridGap={SPACING.spacing24}
               height="100%"
-              // backgroundColor="red"
-              // css={{ outline: 'solid 2px green' }}
             >
               {zoomIn.slot == null ? (
                 <Flex
                   justifyContent={JUSTIFY_FLEX_END}
                   alignSelf={ALIGN_STRETCH}
-                  // backgroundColor={COLORS.yellow35}
                   width="100%"
-                  // css={{ outline: 'solid 1px purple' }}
                 >
                   <ToggleGroup
                     selectedValue={deckView}

From cf14a83f6465a27f8018e1b672ba60ff916e7e20 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 3 Feb 2025 19:22:54 -0500
Subject: [PATCH 06/11] fix step summary vertical shifting

---
 .../src/atoms/buttons/EmptySelectorButton.tsx    |  1 -
 .../pages/Designer/ProtocolSteps/StepSummary.tsx |  7 ++-----
 .../src/pages/Designer/ProtocolSteps/index.tsx   | 16 ++++++++++++----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/src/atoms/buttons/EmptySelectorButton.tsx b/components/src/atoms/buttons/EmptySelectorButton.tsx
index ec3e3be0aa4..119ff041ba9 100644
--- a/components/src/atoms/buttons/EmptySelectorButton.tsx
+++ b/components/src/atoms/buttons/EmptySelectorButton.tsx
@@ -4,7 +4,6 @@ import {
   ALIGN_CENTER,
   CURSOR_DEFAULT,
   CURSOR_POINTER,
-  FLEX_MAX_CONTENT,
   Icon,
   JUSTIFY_CENTER,
   JUSTIFY_START,
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
index 7077b1812be..1daf86148ee 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -40,11 +40,7 @@ function StyledTrans(props: StyledTransProps): JSX.Element {
   const { i18nKey, tagText, values } = props
   const { t } = useTranslation(['protocol_steps', 'application'])
   return (
-    <Flex
-      gridGap={SPACING.spacing4}
-      alignItems={ALIGN_CENTER}
-      flexWrap={NO_WRAP}
-    >
+    <Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER} flexWrap={WRAP}>
       <Trans
         t={t}
         i18nKey={i18nKey}
@@ -431,6 +427,7 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing4}
       width="100%"
+      height="100%"
     >
       {stepSummaryContent != null ? (
         <ListItem type="noActive">
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
index 9bda8fa825e..8ef8f52d8e8 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -59,7 +59,8 @@ export function ProtocolSteps(): JSX.Element {
   const [deckView, setDeckView] = useState<
     typeof leftString | typeof rightString
   >(leftString)
-  const [targetWidth, setTargetWidth] = useState<number>(350)
+  // Note (02/03/25:kk) use DrraggableSidebar's initial width
+  const [targetWidth, setTargetWidth] = useState<number>(235)
 
   const currentHoveredStepId = useSelector(getHoveredStepId)
   const currentSelectedStepId = useSelector(getSelectedStepId)
@@ -83,6 +84,8 @@ export function ProtocolSteps(): JSX.Element {
       backgroundColor={COLORS.grey10}
       height="calc(100vh - 4rem)"
       width="100%"
+      minHeight={FLEX_MAX_CONTENT}
+      id="container"
     >
       <Flex height="100%" padding={SPACING.spacing12}>
         <DraggableSidebar setTargetWidth={setTargetWidth} />
@@ -93,8 +96,8 @@ export function ProtocolSteps(): JSX.Element {
         gridGap={SPACING.spacing16}
         flex="2.85"
         paddingTop={showTimelineAlerts ? '0' : SPACING.spacing24}
-        paddingX="1.75rem"
         height="100%"
+        position={POSITION_RELATIVE}
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}
@@ -145,12 +148,17 @@ export function ProtocolSteps(): JSX.Element {
             ) : (
               <OffDeck tab="protocolSteps" />
             )}
-            {formData == null ? (
+            {/* avoid shifting the deck view container */}
+            <Flex
+              height="5.5rem"
+              opacity={formData == null ? 1 : 0}
+              id="summary container"
+            >
               <StepSummary
                 currentStep={currentStep}
                 stepDetails={stepDetails}
               />
-            ) : null}
+            </Flex>
           </Flex>
         </Flex>
         {enableHotKeyDisplay ? (

From 9c3517c8b8beac52fb3f0147a7e2b4731b8df47c Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 3 Feb 2025 19:25:31 -0500
Subject: [PATCH 07/11] remove console.log

---
 .../RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
index 44f055ab71e..659ccbbb350 100644
--- a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
+++ b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx
@@ -36,8 +36,6 @@ export function RobotCoordinateSpaceWithRef(
     wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
   }
 
-  console.log('wholeDeckViewBox', wholeDeckViewBox)
-
   return (
     <Svg
       viewBox={zoomed ? viewBox : wholeDeckViewBox}

From e458102a7b697c93066dbac294fd9b4132421896 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 3 Feb 2025 19:26:42 -0500
Subject: [PATCH 08/11] fix lint error

---
 protocol-designer/src/pages/Designer/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
index 5c0a4afcb6e..792d3f25f4f 100644
--- a/protocol-designer/src/pages/Designer/index.tsx
+++ b/protocol-designer/src/pages/Designer/index.tsx
@@ -3,19 +3,17 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import {
-  ALIGN_END,
+  ALIGN_CENTER,
   ALIGN_STRETCH,
   COLORS,
   DIRECTION_COLUMN,
-  FLEX_MAX_CONTENT,
   Flex,
   INFO_TOAST,
+  JUSTIFY_CENTER,
   JUSTIFY_FLEX_END,
   SPACING,
   ToggleGroup,
   useOnClickOutside,
-  JUSTIFY_CENTER,
-  ALIGN_CENTER,
 } from '@opentrons/components'
 import {
   selectDropdownItem,

From 4a14086339d63da7db0fd68d665ad6f6f1624476 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 3 Feb 2025 19:41:54 -0500
Subject: [PATCH 09/11] Update Designer.test.tsx

---
 protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx b/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx
index d7a05a8efe0..9480ebc2d45 100644
--- a/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx
+++ b/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx
@@ -16,6 +16,7 @@ import type { NavigateFunction } from 'react-router-dom'
 
 const mockNavigate = vi.fn()
 
+vi.mock('../OffDeck')
 vi.mock('../ProtocolSteps')
 vi.mock('../../../labware-ingred/actions')
 vi.mock('../../../labware-ingred/selectors')

From 3c6ff005d6fe1930381c0faf965f33990a841daa Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Mon, 3 Feb 2025 19:56:02 -0500
Subject: [PATCH 10/11] Rename Offdeck.test.tsx to OffDeck.test.tsx

---
 .../Offdeck/__tests__/{Offdeck.test.tsx => OffDeck.test.tsx}      | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename protocol-designer/src/pages/Designer/Offdeck/__tests__/{Offdeck.test.tsx => OffDeck.test.tsx} (100%)

diff --git a/protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx b/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeck.test.tsx
similarity index 100%
rename from protocol-designer/src/pages/Designer/Offdeck/__tests__/Offdeck.test.tsx
rename to protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeck.test.tsx

From a1bd38b1fa2c849a3994d0f214477fdc1f6bbf0c Mon Sep 17 00:00:00 2001
From: koji <baxin1919@gmail.com>
Date: Mon, 3 Feb 2025 22:25:44 -0500
Subject: [PATCH 11/11] fix test errors

---
 .../pages/Designer/{Offdeck => OffDeck}/HighlightOffdeckSlot.tsx  | 0
 .../src/pages/Designer/{Offdeck => OffDeck}/OffDeckDetails.tsx    | 0
 .../Designer/{Offdeck => OffDeck}/__tests__/OffDeck.test.tsx      | 0
 .../{Offdeck => OffDeck}/__tests__/OffDeckDetails.test.tsx        | 0
 .../src/pages/Designer/{Offdeck => OffDeck}/index.tsx             | 0
 5 files changed, 0 insertions(+), 0 deletions(-)
 rename protocol-designer/src/pages/Designer/{Offdeck => OffDeck}/HighlightOffdeckSlot.tsx (100%)
 rename protocol-designer/src/pages/Designer/{Offdeck => OffDeck}/OffDeckDetails.tsx (100%)
 rename protocol-designer/src/pages/Designer/{Offdeck => OffDeck}/__tests__/OffDeck.test.tsx (100%)
 rename protocol-designer/src/pages/Designer/{Offdeck => OffDeck}/__tests__/OffDeckDetails.test.tsx (100%)
 rename protocol-designer/src/pages/Designer/{Offdeck => OffDeck}/index.tsx (100%)

diff --git a/protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx b/protocol-designer/src/pages/Designer/OffDeck/HighlightOffdeckSlot.tsx
similarity index 100%
rename from protocol-designer/src/pages/Designer/Offdeck/HighlightOffdeckSlot.tsx
rename to protocol-designer/src/pages/Designer/OffDeck/HighlightOffdeckSlot.tsx
diff --git a/protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx b/protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx
similarity index 100%
rename from protocol-designer/src/pages/Designer/Offdeck/OffDeckDetails.tsx
rename to protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx
diff --git a/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeck.test.tsx b/protocol-designer/src/pages/Designer/OffDeck/__tests__/OffDeck.test.tsx
similarity index 100%
rename from protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeck.test.tsx
rename to protocol-designer/src/pages/Designer/OffDeck/__tests__/OffDeck.test.tsx
diff --git a/protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx b/protocol-designer/src/pages/Designer/OffDeck/__tests__/OffDeckDetails.test.tsx
similarity index 100%
rename from protocol-designer/src/pages/Designer/Offdeck/__tests__/OffDeckDetails.test.tsx
rename to protocol-designer/src/pages/Designer/OffDeck/__tests__/OffDeckDetails.test.tsx
diff --git a/protocol-designer/src/pages/Designer/Offdeck/index.tsx b/protocol-designer/src/pages/Designer/OffDeck/index.tsx
similarity index 100%
rename from protocol-designer/src/pages/Designer/Offdeck/index.tsx
rename to protocol-designer/src/pages/Designer/OffDeck/index.tsx