fix(protocol-designer): hyphen off-deck and fix hover (#18897)

closes RQA-4354

Author: jerader

protocol-designer/src/assets/localization/en/starting_deck_state.json

@@ -56,8 +56,8 @@
   "num_liquid_plural": "{{count}} liquids",
   "num_liquid": "{{count}} liquid",
   "off_deck_labware": "Off-deck Labware",
-  "off_deck_title": "Off deck",
-  "offDeck": "Off deck",
+  "off_deck_title": "Off-deck",
+  "offDeck": "Off-deck",
   "onDeck": "On deck",
   "one_item": "No more than 1 {{hardware}} allowed on the deck at one time",
   "only_display_rec": "Only display recommended labware",

protocol-designer/src/pages/Designer/OffDeck/OffDeckDetails.tsx

@@ -62,17 +62,14 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
       <Flex
         backgroundColor={COLORS.white}
         borderRadius={BORDERS.borderRadius12}
-        width="100%"
-        height="100%"
-        padding={`${SPACING.spacing40} ${SPACING.spacing40} 0 ${SPACING.spacing40}`}
+        padding={SPACING.spacing40}
         gridGap={SPACING.spacing24}
         alignItems={ALIGN_CENTER}
         justifyContent={JUSTIFY_FLEX_END}
       >
         <Flex
           flex="0 0 auto"
           width={OFF_DECK_MAP_WIDTH}
-          height="100%"
           maxHeight={OFF_DECK_MAP_HEIGHT_FOR_STEP}
           minHeight={OFF_DECK_MAP_HEIGHT_FOR_STEP}
           alignItems={ALIGN_CENTER}
@@ -83,11 +80,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
           flexDirection={DIRECTION_COLUMN}
           gridGap={SPACING.spacing40}
         >
-          <Flex
-            justifyContent={JUSTIFY_CENTER}
-            width="100%"
-            color={COLORS.grey60}
-          >
+          <Flex justifyContent={JUSTIFY_CENTER} color={COLORS.grey60}>
             <StyledText desktopStyle="bodyDefaultSemiBold">
               {i18n.format(t('off_deck_labware'), 'upperCase')}
             </StyledText>
@@ -117,12 +110,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
                 zDimension: dimensions.zDimension ?? 0,
               }
               return (
-                <Flex
-                  id={lw.id}
-                  flexDirection={DIRECTION_COLUMN}
-                  key={lw.id}
-                  paddingBottom="0"
-                >
+                <Flex id={lw.id} flexDirection={DIRECTION_COLUMN} key={lw.id}>
                   <RobotWorkSpace
                     key={lw.id}
                     viewBox={`${definition.cornerOffsetFromSlot.x} ${definition.cornerOffsetFromSlot.y} ${dimensions.xDimension} ${dimensions.yDimension}`}
@@ -181,7 +169,7 @@ export function OffDeckDetails(props: OffDeckDetailsProps): JSX.Element {
         </Flex>
       </Flex>
       {hoverSlot != null && terminalItemId === START_TERMINAL_ITEM_ID ? (
-        <Flex width="100%" height="8rem">
+        <Flex>
           <SlotDetailsContainer
             robotType={robotType}
             slot="offDeck"

protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx

@@ -129,7 +129,7 @@ describe('ProtocolSteps', () => {
   it('renders the toggle when formData is null', () => {
     render()
     screen.getByText('mock DeckSetupContainer')
-    fireEvent.click(screen.getByText('Off deck'))
+    fireEvent.click(screen.getByText('Off-deck'))
     screen.getByText('mock OffDeck')
   })
 

protocol-designer/src/pages/ProtocolOverview/__tests__/StartingDeck.test.tsx

@@ -56,14 +56,14 @@ describe('StartingDeck', () => {
     screen.getByText('Protocol Starting Deck')
     screen.getByText('Materials list')
     screen.getByRole('button', { name: 'On deck' })
-    screen.getByRole('button', { name: 'Off deck' })
+    screen.getByRole('button', { name: 'Off-deck' })
     screen.getByText('mock DeckThumbnail')
   })
 
   it('should render off deck when clicking toggle button', () => {
     render(props)
     screen.getByText('mock DeckThumbnail')
-    fireEvent.click(screen.getByRole('button', { name: 'Off deck' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Off-deck' }))
     screen.getByText('mock OffDeckThumbnail')
   })