fix(app): fix devices landing page text wrapping (#11110)

This will address design feedback on the Devices landing page.
fix #10886

Author: koji

app/src/organisms/Devices/RobotCard.tsx

@@ -35,6 +35,7 @@ import {
 } from './hooks'
 import { ReachableBanner } from './ReachableBanner'
 import { RobotOverflowMenu } from './RobotOverflowMenu'
+import { useGetElementDOMRectProperty } from '../../organisms/ProtocolsLanding/useGetElementDOMRectProperty'
 
 import type { DiscoveredRobot } from '../../redux/discovery/types'
 
@@ -45,6 +46,8 @@ const ROBOT_CARD_STYLE = css`
   }
 `
 
+const ROBOT_CARD_WRAP_SIZE = 650
+
 interface RobotCardProps {
   robot: DiscoveredRobot
 }
@@ -54,6 +57,25 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
   const { name: robotName = null, local } = robot
   const history = useHistory()
 
+  const robotCardRef = React.useRef(null)
+  const { getElementProperty } = useGetElementDOMRectProperty<HTMLDivElement>(
+    robotCardRef
+  )
+  const [robotCardWidth, setRobotCardWidth] = React.useState<number | null>(
+    getElementProperty('width')
+  )
+
+  const handleResize = React.useCallback((): void => {
+    setRobotCardWidth(getElementProperty('width'))
+  }, [getElementProperty])
+
+  React.useEffect(() => {
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [handleResize])
+
   return robotName != null ? (
     <Flex
       alignItems={ALIGN_CENTER}
@@ -66,6 +88,7 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
       width="100%"
       onClick={() => history.push(`/devices/${robotName}`)}
       cursor="pointer"
+      ref={robotCardRef}
     >
       <img
         src={OT2_PNG}
@@ -112,14 +135,20 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
           ) : null}
         </Flex>
         {robot.status === CONNECTABLE ? (
-          <Flex flexDirection={DIRECTION_ROW}>
-            <Flex flex="4">
-              <AttachedPipettes robotName={robotName} />
-            </Flex>
-            <Flex flex="1">
-              <AttachedModules robotName={robotName} />
-            </Flex>
-          </Flex>
+          <Box
+            display="grid"
+            css={
+              robotCardWidth == null || robotCardWidth >= ROBOT_CARD_WRAP_SIZE
+                ? { 'grid-template-columns': '4fr 1fr' }
+                : { 'grid-template-rows': '2fr 1fr' }
+            }
+          >
+            <AttachedPipettes
+              robotName={robotName}
+              robotCardWidth={robotCardWidth}
+            />
+            <AttachedModules robotName={robotName} />
+          </Box>
         ) : null}
       </Box>
       <RobotOverflowMenu robot={robot} alignSelf={ALIGN_START} />
@@ -132,10 +161,10 @@ function AttachedModules(props: { robotName: string }): JSX.Element | null {
   const { t } = useTranslation('devices_landing')
   const attachedModules = useAttachedModules()
   return attachedModules.length > 0 ? (
-    <Flex
-      flexDirection={DIRECTION_COLUMN}
+    <Box
+      display="grid"
+      gridTemplateRows="1fr 1fr"
       paddingRight={SPACING.spacing4}
-      width="100%"
     >
       <StyledText
         as="h6"
@@ -156,23 +185,29 @@ function AttachedModules(props: { robotName: string }): JSX.Element | null {
           />
         ))}
       </Flex>
-    </Flex>
+    </Box>
   ) : (
     <Flex width="100%"></Flex>
   )
 }
-function AttachedPipettes(props: { robotName: string }): JSX.Element {
-  const { robotName } = props
+function AttachedPipettes(props: {
+  robotName: string
+  robotCardWidth: number | null
+}): JSX.Element {
+  const { robotName, robotCardWidth } = props
   const { t } = useTranslation('devices_landing')
   const attachedPipettes = useAttachedPipettes()
+
   return (
-    <Flex flexDirection={DIRECTION_ROW} width="100%">
-      <Flex
-        flex="1"
-        flexDirection={DIRECTION_COLUMN}
-        paddingRight={SPACING.spacing4}
-        width="100%"
-      >
+    <Box
+      display="grid"
+      css={
+        robotCardWidth == null || robotCardWidth >= ROBOT_CARD_WRAP_SIZE
+          ? { 'grid-template-columns': '1fr 1fr' }
+          : { 'grid-template-rows': '1fr' }
+      }
+    >
+      <Box gridTemplateRows="1fr 1fr" paddingRight={SPACING.spacing4}>
         <StyledText
           as="h6"
           textTransform={TEXT_TRANSFORM_UPPERCASE}
@@ -184,13 +219,8 @@ function AttachedPipettes(props: { robotName: string }): JSX.Element {
         <StyledText as="p" id={`RobotCard_${robotName}_leftMountPipette`}>
           {attachedPipettes?.left?.modelSpecs.displayName ?? t('empty')}
         </StyledText>
-      </Flex>
-      <Flex
-        flex="1"
-        flexDirection={DIRECTION_COLUMN}
-        paddingRight={SPACING.spacing4}
-        width="100%"
-      >
+      </Box>
+      <Box gridTemplateRows="1fr 1fr" paddingRight={SPACING.spacing4}>
         <StyledText
           as="h6"
           textTransform={TEXT_TRANSFORM_UPPERCASE}
@@ -202,8 +232,8 @@ function AttachedPipettes(props: { robotName: string }): JSX.Element {
         <StyledText as="p" id={`RobotCard_${robotName}_rightMountPipette`}>
           {attachedPipettes?.right?.modelSpecs.displayName ?? t('empty')}
         </StyledText>
-      </Flex>
-    </Flex>
+      </Box>
+    </Box>
   )
 }
 

app/src/organisms/ProtocolsLanding/ProtocolCard.tsx

@@ -135,6 +135,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
   const { getElementProperty } = useGetElementDOMRectProperty<HTMLDivElement>(
     targetRef
   )
+  const width = getElementProperty('width')
 
   // TODO kj 07/06/2022: Currently, using hardcoded number to align elements
   // This should be removed in the future
@@ -146,9 +147,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
         size="6rem"
         height="auto"
         justifyContent={JUSTIFY_CENTER}
-        alignItems={
-          getElementProperty('height') <= 880 ? ALIGN_START : ALIGN_CENTER
-        }
+        alignItems={width == null || width <= 800 ? ALIGN_START : ALIGN_CENTER}
         data-testid={`ProtocolCard_deckLayout_${protocolDisplayName}`}
       >
         {
@@ -280,7 +279,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
             data-testid={`ProtocolCard_date_${protocolDisplayName}`}
             marginTop={SPACING.spacing3}
             justifyContent={
-              getElementProperty('height') <= 880 ? JUSTIFY_FLEX_END : FLEX_NONE
+              width == null || width <= 880 ? JUSTIFY_FLEX_END : FLEX_NONE
             }
           >
             <StyledText

app/src/organisms/ProtocolsLanding/useGetElementDOMRectProperty.ts

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 type DOMRectProperty = keyof Omit<DOMRect, 'toJSON'>
 interface props {
-  getElementProperty: (property: DOMRectProperty) => number
+  getElementProperty: (property: DOMRectProperty) => number | null
 }
 
 /**
@@ -26,13 +26,13 @@ export const useGetElementDOMRectProperty = <T extends HTMLElement>(
   elementRef: React.RefObject<T>
 ): props => {
   const getElementProperty = React.useCallback(
-    (targetProperty: DOMRectProperty): number => {
+    (targetProperty: DOMRectProperty): number | null => {
       const clientRect = elementRef.current?.getBoundingClientRect()
       if (clientRect != null) {
         return clientRect[targetProperty]
       }
-      // if clientRect is undefined, return 0
-      return 0
+      // if clientRect is undefined, return null
+      return null
     },
     [elementRef]
   )