fix(app): adjust applied labware offset data table (#15172)

* fix(app): adjust applied labware offset data table
Opentrons · May 15, 2024 · b6eea4a · b6eea4a
1 parent 79f25a9
commit b6eea4a
Showing 1 changed file with 58 additions and 51 deletions.
diff --git a/app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx b/app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx
@@ -2,6 +2,8 @@ import * as React from 'react'
 import isEqual from 'lodash/isEqual'
 import { useTranslation } from 'react-i18next'
 import {
+  ALIGN_CENTER,
+  ALIGN_END,
   BORDERS,
   Box,
   COLORS,
@@ -98,34 +100,40 @@ export function HistoricalProtocolRunOffsetDrawer(
           </Flex>
         </Banner>
       ) : null}
-      <Flex justifyContent={JUSTIFY_FLEX_START}>
-        <StyledText
-          width="24%"
-          as="label"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          textTransform={TYPOGRAPHY.textTransformCapitalize}
-          datatest-id="RecentProtocolRun_OffsetDrawer_locationTitle"
-        >
-          {t('location')}
-        </StyledText>
-        <StyledText
-          as="label"
-          width="33%"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          textTransform={TYPOGRAPHY.textTransformCapitalize}
-          datatest-id="RecentProtocolRun_OffsetDrawer_labwareTitle"
-        >
-          {t('labware')}
-        </StyledText>
-        <StyledText
-          as="label"
-          width="40%"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          textTransform={TYPOGRAPHY.textTransformCapitalize}
-          datatest-id="RecentProtocolRun_OffsetDrawer_labwareOffsetDataTitle"
+      <Flex justifyContent={JUSTIFY_FLEX_START} alignItems={ALIGN_END}>
+        <Box
+          width="25.25%"
+          padding={`${SPACING.spacing4} ${SPACING.spacing8} ${SPACING.spacing4} ${SPACING.spacing4}`}
         >
-          {t('labware_offset_data')}
-        </StyledText>
+          <StyledText
+            as="label"
+            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+            textTransform={TYPOGRAPHY.textTransformCapitalize}
+            datatest-id="RecentProtocolRun_OffstDrawer_locationTitle"
+          >
+            {t('location')}
+          </StyledText>
+        </Box>
+        <Box width="39.75%" padding={`${SPACING.spacing4} ${SPACING.spacing8}`}>
+          <StyledText
+            as="label"
+            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+            textTransform={TYPOGRAPHY.textTransformCapitalize}
+            datatest-id="RecentProtocolRun_OffsetDrawer_labwareTitle"
+          >
+            {t('labware')}
+          </StyledText>
+        </Box>
+        <Box width="34%" padding={`${SPACING.spacing4} ${SPACING.spacing8}`}>
+          <StyledText
+            as="label"
+            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+            textTransform={TYPOGRAPHY.textTransformCapitalize}
+            datatest-id="RecentProtocolRun_OffsetDrawer_labwareOffsetDataTitle"
+          >
+            {t('labware_offset_data')}
+          </StyledText>
+        </Box>
       </Flex>
       {uniqueLabwareOffsets.map((offset, index) => {
         const labwareDefinitions =
@@ -144,33 +152,32 @@ export function HistoricalProtocolRunOffsetDrawer(
           <Flex
             key={index}
             justifyContent={JUSTIFY_FLEX_START}
-            padding={SPACING.spacing8}
+            alignItems={ALIGN_CENTER}
+            padding={`${SPACING.spacing2} ${SPACING.spacing8}`}
             backgroundColor={COLORS.white}
-            marginY={SPACING.spacing8}
+            marginY={SPACING.spacing4}
             borderRadius={BORDERS.borderRadius4}
+            gridGap={SPACING.spacing24}
           >
-            <StyledText width="23.5%" as="label">
-              {t('slot', { slotName: offset.location.slotName })}
-              {offset.location.moduleModel != null &&
-                ` - ${String(
-                  getModuleDisplayName(offset.location.moduleModel)
-                )}`}
-            </StyledText>
-            <StyledText
-              as="label"
-              width="34%"
-              overflow="hidden"
-              textOverflow="ellipsis"
-              title={labwareName}
-            >
-              {labwareName}
-            </StyledText>
-            <OffsetVector
-              {...offset.vector}
-              width="40%"
-              fontSize={TYPOGRAPHY.fontSizeLabel}
-              as="label"
-            />
+            <Box width="23.25%">
+              <StyledText as="label">
+                {t('slot', { slotName: offset.location.slotName })}
+                {offset.location.moduleModel != null &&
+                  ` - ${getModuleDisplayName(offset.location.moduleModel)}`}
+              </StyledText>
+            </Box>
+            <Box width="38%">
+              <StyledText as="label" title={labwareName}>
+                {labwareName}
+              </StyledText>
+            </Box>
+            <Box width="33%">
+              <OffsetVector
+                {...offset.vector}
+                fontSize={TYPOGRAPHY.fontSizeLabel}
+                as="label"
+              />
+            </Box>
           </Flex>
         )
       })}