fix(protocol-designer): deck setup slot details responsiveness (#16862)

closes RQA-3602 RQA-3327

components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx

@@ -1,7 +1,9 @@
 import { Flex } from '../../../primitives'
 import {
   ALIGN_FLEX_START,
+  DIRECTION_COLUMN,
   DIRECTION_ROW,
+  JUSTIFY_FLEX_START,
   JUSTIFY_SPACE_BETWEEN,
 } from '../../../styles'
 import { SPACING } from '../../../ui-style-constants'
@@ -10,19 +12,27 @@ interface ListItemDescriptorProps {
   type: 'default' | 'large'
   description: JSX.Element
   content: JSX.Element
+  changeFlexDirection?: boolean
 }
 
 export const ListItemDescriptor = (
   props: ListItemDescriptorProps
 ): JSX.Element => {
-  const { description, content, type } = props
+  const { description, content, type, changeFlexDirection = false } = props
+  let justifyContent = 'none'
+  if (type === 'default' && changeFlexDirection) {
+    justifyContent = JUSTIFY_FLEX_START
+  } else if (type === 'default') {
+    justifyContent = JUSTIFY_SPACE_BETWEEN
+  }
+
   return (
     <Flex
-      flexDirection={DIRECTION_ROW}
+      flexDirection={changeFlexDirection ? DIRECTION_COLUMN : DIRECTION_ROW}
       gridGap={SPACING.spacing8}
       width="100%"
       alignItems={ALIGN_FLEX_START}
-      justifyContent={type === 'default' ? JUSTIFY_SPACE_BETWEEN : 'none'}
+      justifyContent={justifyContent}
       padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
     >
       {description}

components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithRef.tsx

@@ -34,17 +34,7 @@ export function RobotCoordinateSpaceWithRef(
       (acc, deckSlot) => ({ ...acc, [deckSlot.id]: deckSlot }),
       {}
     )
-
-    const PADDING = deckDef.otId === 'ot2_standard' ? 5 : 10
-    if (deckDef.otId === 'ot2_standard') {
-      wholeDeckViewBox = `${viewBoxOriginX - PADDING} ${
-        viewBoxOriginY + PADDING * 5
-      } ${deckXDimension + PADDING * 2} ${deckYDimension - PADDING * 10}`
-    } else {
-      wholeDeckViewBox = `${viewBoxOriginX + PADDING * 2} ${
-        viewBoxOriginY - PADDING
-      } ${deckXDimension + PADDING * 4} ${deckYDimension + PADDING * 3}`
-    }
+    wholeDeckViewBox = `${viewBoxOriginX} ${viewBoxOriginY} ${deckXDimension} ${deckYDimension}`
   }
 
   return (

protocol-designer/src/organisms/SlotDetailsContainer/index.tsx

@@ -1,20 +1,15 @@
-import { useLocation } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { getModuleDisplayName } from '@opentrons/shared-data'
-import { RobotCoordsForeignObject } from '@opentrons/components'
 import * as wellContentsSelectors from '../../top-selectors/well-contents'
-import { getAdditionalEquipmentEntities } from '../../step-forms/selectors'
 import { selectors } from '../../labware-ingred/selectors'
 import { selectors as uiLabwareSelectors } from '../../ui/labware'
 import { getDeckSetupForActiveItem } from '../../top-selectors/labware-locations'
 import { SlotInformation } from '../../organisms/SlotInformation'
-import { getXPosition } from './utils'
 
 import type { DeckSlotId, RobotType } from '@opentrons/shared-data'
 import type { ContentsByWell } from '../../labware-ingred/types'
 
-const SLOT_DETAIL_Y_POSITION = '-10'
 interface SlotDetailContainerProps {
   robotType: RobotType
   slot: DeckSlotId | null
@@ -26,17 +21,12 @@ export function SlotDetailsContainer(
 ): JSX.Element | null {
   const { robotType, slot, offDeckLabwareId } = props
   const { t } = useTranslation('shared')
-  const location = useLocation()
   const deckSetup = useSelector(getDeckSetupForActiveItem)
   const allWellContentsForActiveItem = useSelector(
     wellContentsSelectors.getAllWellContentsForActiveItem
   )
   const nickNames = useSelector(uiLabwareSelectors.getLabwareNicknamesById)
   const allIngredNamesIds = useSelector(selectors.allIngredientNamesIds)
-  const additionalEquipment = useSelector(getAdditionalEquipmentEntities)
-  const hasStagingArea = Object.values(additionalEquipment).some(
-    item => item.name === 'stagingArea'
-  )
 
   if (slot == null || (slot === 'offDeck' && offDeckLabwareId == null)) {
     return null
@@ -108,24 +98,7 @@ export function SlotDetailsContainer(
     }
   }
 
-  return location.pathname === '/designer' && slot !== 'offDeck' ? (
-    <RobotCoordsForeignObject
-      width="15.8125rem"
-      height="26.75rem"
-      x={getXPosition(slot, robotType, hasStagingArea)}
-      y={SLOT_DETAIL_Y_POSITION}
-    >
-      <SlotInformation
-        location={slot}
-        robotType={robotType}
-        modules={moduleDisplayName != null ? [moduleDisplayName] : []}
-        labwares={labwares}
-        fixtures={fixtureDisplayNames}
-        liquids={liquidNamesOnLabware}
-        adapters={adapters}
-      />
-    </RobotCoordsForeignObject>
-  ) : (
+  return (
     <SlotInformation
       location={slot}
       robotType={robotType}

protocol-designer/src/organisms/SlotInformation/index.tsx

@@ -12,8 +12,16 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+import {
+  FLEX_ROBOT_TYPE,
+  getModuleDisplayName,
+  TC_MODULE_LOCATION_OT2,
+  TC_MODULE_LOCATION_OT3,
+  THERMOCYCLER_MODULE_V1,
+  THERMOCYCLER_MODULE_V2,
+} from '@opentrons/shared-data'
 import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
+import { useDeckSetupWindowBreakPoint } from '../../pages/Designer/DeckSetup/utils'
 
 import type { FC } from 'react'
 import type { RobotType } from '@opentrons/shared-data'
@@ -38,15 +46,28 @@ export const SlotInformation: FC<SlotInformationProps> = ({
   fixtures = [],
 }) => {
   const { t } = useTranslation('shared')
+  const breakPointSize = useDeckSetupWindowBreakPoint()
+  const pathLocation = useLocation()
   const isOffDeck = location === 'offDeck'
+  const tcDisplayLocation =
+    robotType === FLEX_ROBOT_TYPE
+      ? TC_MODULE_LOCATION_OT3
+      : TC_MODULE_LOCATION_OT2
+  const modifiedLocation =
+    modules.includes(getModuleDisplayName(THERMOCYCLER_MODULE_V2)) ||
+    modules.includes(getModuleDisplayName(THERMOCYCLER_MODULE_V1))
+      ? tcDisplayLocation
+      : location
+
   return (
     <Flex
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing12}
+      maxWidth={pathLocation.pathname === '/designer' ? '23.4375rem' : '100%'}
       width="100%"
     >
       <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
-        {isOffDeck ? null : <DeckInfoLabel deckLabel={location} />}
+        {isOffDeck ? null : <DeckInfoLabel deckLabel={modifiedLocation} />}
         <StyledText desktopStyle="bodyLargeSemiBold">
           {t(isOffDeck ? 'labware_detail' : 'slot_detail')}
         </StyledText>
@@ -55,11 +76,16 @@ export const SlotInformation: FC<SlotInformationProps> = ({
         {liquids.length > 1 ? (
           <ListItem type="noActive" width="max-content">
             <ListItemDescriptor
+              changeFlexDirection={breakPointSize === 'medium'}
               type="default"
               content={
                 <StyledText
                   desktopStyle="bodyDefaultRegular"
-                  textAlign={TYPOGRAPHY.textAlignRight}
+                  textAlign={
+                    breakPointSize === 'medium'
+                      ? TYPOGRAPHY.textAlignLeft
+                      : TYPOGRAPHY.textAlignRight
+                  }
                   css={LINE_CLAMP_TEXT_STYLE(2)}
                 >
                   {liquids.join(', ')}
@@ -92,11 +118,10 @@ interface StackInfoListProps {
 }
 
 function StackInfoList({ title, items }: StackInfoListProps): JSX.Element {
-  const pathLocation = useLocation()
   return (
     <Flex
       flexDirection={DIRECTION_COLUMN}
-      width={pathLocation.pathname === '/designer' ? '15.8125rem' : '100%'}
+      width="100%"
       gridGap={SPACING.spacing4}
     >
       {items.length > 0 ? (
@@ -121,20 +146,27 @@ interface StackInfoProps {
 
 function StackInfo({ title, stackInformation }: StackInfoProps): JSX.Element {
   const { t } = useTranslation('shared')
+  const breakPointSize = useDeckSetupWindowBreakPoint()
+
   return (
     <ListItem type="noActive">
       <ListItemDescriptor
+        changeFlexDirection={breakPointSize === 'medium'}
         type="default"
         content={
           <StyledText
             desktopStyle="bodyDefaultRegular"
-            textAlign={TYPOGRAPHY.textAlignRight}
+            textAlign={
+              breakPointSize === 'medium'
+                ? TYPOGRAPHY.textAlignLeft
+                : TYPOGRAPHY.textAlignRight
+            }
           >
             {stackInformation ?? t('none')}
           </StyledText>
         }
         description={
-          <Flex width="7.40625rem">
+          <Flex>
             <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
               {title}
             </StyledText>