modifying the containers

Opentrons · Jan 28, 2025 · 7f9b706 · 7f9b706
1 parent cb02084
commit 7f9b706
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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}>