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] 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}>