fix(app): fix deck view container styling in visualization page (#20179)

* fix(app): fix deck view container styling in visualization page

Author: koji

app/src/assets/localization/en/protocol_visualization.json

@@ -1,6 +1,6 @@
 {
   "active": "Active",
-  "deck_view": "Deck view",
+  "deck_view": "Deck View",
   "destination_labware": "Destination labware",
   "destination_tips": "Destination tips",
   "destination_well_view": "Destination well view",

app/src/organisms/Desktop/ProtocolVisualization/stepdetailcontainer.module.css

@@ -1,8 +1,8 @@
 .container {
   display: flex;
   width: 100%;
-  min-width: 200px;
-  max-width: 400px;
+  min-width: 10.75rem;
+  max-width: 37.5rem;
   flex-direction: column;
   gap: var(--spacing-8);
 }

app/src/pages/Desktop/Protocols/ProtocolVisualization/DeckView.tsx

@@ -5,8 +5,8 @@ import {
   COLORS,
   DeckFromLayers,
   FixedTrashText,
-  Flex,
   FlexTrash,
+  NO_WRAP,
   RobotCoordinateSpaceWithRef,
   SingleSlotFixture,
   SlotLabels,
@@ -24,13 +24,13 @@ import {
 } from '@opentrons/shared-data'
 import { getSlotInLocationStack } from '@opentrons/step-generation'
 
+import styles from './deckview.module.css'
 import { DeckViewDetails } from './DeckViewDetails'
 import {
   getActiveLayer,
   getIsCutoutA1Active,
   getIsPipetteOverTrash,
 } from './utils'
-import styles from './visualization.module.css'
 
 import type { Dispatch, SetStateAction } from 'react'
 import type { StagingAreaLocation, TrashCutoutId } from '@opentrons/components'
@@ -132,16 +132,20 @@ export function DeckView(props: DeckViewProps): JSX.Element {
       : 0
 
   return (
-    <div className={styles.deck_view_padding}>
-      <div className={styles.deck_view_container}>
-        <Flex justifyContent="space-between" with="100%">
-          <StyledText desktopStyle="bodyLargeSemiBold">
-            {t('deck_view')}
-          </StyledText>
-          <StyledText color={COLORS.grey60} desktopStyle="bodyDefaultRegular">
-            {t('step', { number: selectedCommandIndex })}
-          </StyledText>
-        </Flex>
+    <div className={styles.deck_view_container}>
+      <div className={styles.header_container}>
+        <StyledText desktopStyle="bodyLargeSemiBold">
+          {t('deck_view')}
+        </StyledText>
+        <StyledText
+          color={COLORS.grey60}
+          desktopStyle="bodyDefaultRegular"
+          whiteSpace={NO_WRAP}
+        >
+          {t('step', { number: selectedCommandIndex })}
+        </StyledText>
+      </div>
+      <div className={styles.body_container}>
         <RobotCoordinateSpaceWithRef
           height="100%"
           width="100%"

app/src/pages/Desktop/Protocols/ProtocolVisualization/VisualizerContainer.tsx

@@ -270,7 +270,6 @@ export function VisualizerContainer(
           milliSecondsPerFrame={milliSecondsPerFrame}
           setMilliSecondsPerFrame={setMilliSecondsPerFrame}
         />
-
         <DeckView
           commands={analysis.commands}
           liquids={liquids}

app/src/pages/Desktop/Protocols/ProtocolVisualization/deckview.module.css

@@ -0,0 +1,74 @@
+.deck_view_container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  border-radius: var(--border-radius-8);
+  background-color: var(--white);
+  container-name: deckview-container;
+  container-type: inline-size;
+  gap: var(--spacing-16);
+  overflow-y: hidden;
+}
+
+.header_container {
+  position: sticky;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-12);
+  gap: var(--spacing-16);
+  overflow-x: hidden;
+}
+
+@container deckview-container (min-width:284px) {
+  .header_container {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-4);
+    justify-self: unset;
+  }
+}
+
+@container deckview-container (min-width:680px) {
+  .header_container {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-16);
+  }
+}
+
+.body_container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 23.75rem; /* 380px */
+  min-height: 13rem; /* 208px */
+  max-height: 31.875rem; /* 510px */
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-16);
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+@container deckview-container (min-width: 680px) {
+  .body_container {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    flex-shrink: 1;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-24);
+  }
+}

app/src/pages/Desktop/Protocols/ProtocolVisualization/visualization.module.css

@@ -122,15 +122,6 @@
   pointer-events: auto;
 }
 
-.deck_view_container {
-  width: 100%;
-  height: 100%;
-  padding: 28px 32px;
-  border-radius: var(--border-radius-8);
-  background-color: var(--white);
-  gap: var(--spacing-20);
-}
-
 .detail_container {
   display: flex;
   height: 100%;