fix(app): Labware List Item responsiveness and stacking order (#15982)

Fix RQA-2924, RQA-2926
Opentrons · Aug 13, 2024 · 312236e · 312236e
1 parent ffd1c16
commit 312236e
Showing 1 changed file with 22 additions and 24 deletions.
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx
@@ -56,7 +56,7 @@ import type { NestedLabwareInfo } from './getNestedLabwareInfo'
 
 const LabwareRow = styled.div`
   display: grid;
-  grid-template-columns: 1fr 6fr 5.9fr;
+  grid-template-columns: 90px 12fr;
   border-style: ${BORDERS.styleSolid};
   border-width: 1px;
   border-color: ${COLORS.grey30};
@@ -268,7 +268,7 @@ export function LabwareListItem(
 
   return (
     <LabwareRow>
-      <Flex alignItems={ALIGN_CENTER} width="80px" gridGap={SPACING.spacing2}>
+      <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing2}>
         {slotInfo != null && isFlex ? (
           <DeckInfoLabel deckLabel={slotInfo} />
         ) : (
@@ -283,31 +283,10 @@ export function LabwareListItem(
           <DeckInfoLabel iconName="stacked" />
         ) : null}
       </Flex>
-      <Flex
-        flexDirection={DIRECTION_COLUMN}
-        gridGap={SPACING.spacing16}
-        width="45.875rem"
-      >
-        <Flex>
-          {showLabwareSVG && <StandaloneLabware definition={definition} />}
-          <Flex
-            flexDirection={DIRECTION_COLUMN}
-            justifyContent={JUSTIFY_CENTER}
-            marginLeft={SPACING.spacing8}
-            marginRight={SPACING.spacing24}
-          >
-            <StyledText desktopStyle="bodyDefaultSemiBold">
-              {labwareDisplayName}
-            </StyledText>
-            <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
-              {nickName}
-            </StyledText>
-          </Flex>
-        </Flex>
+      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
         {nestedLabwareInfo != null &&
         nestedLabwareInfo?.sharedSlotId === slotInfo ? (
           <>
-            <Divider />
             <Flex>
               <Flex
                 flexDirection={DIRECTION_COLUMN}
@@ -326,8 +305,27 @@ export function LabwareListItem(
                 </StyledText>
               </Flex>
             </Flex>
+            <Divider />
           </>
         ) : null}
+        <Flex>
+          {showLabwareSVG ? (
+            <StandaloneLabware definition={definition} />
+          ) : null}
+          <Flex
+            flexDirection={DIRECTION_COLUMN}
+            justifyContent={JUSTIFY_CENTER}
+            marginLeft={SPACING.spacing8}
+            marginRight={SPACING.spacing24}
+          >
+            <StyledText desktopStyle="bodyDefaultSemiBold">
+              {labwareDisplayName}
+            </StyledText>
+            <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+              {nickName}
+            </StyledText>
+          </Flex>
+        </Flex>
         {moduleDisplayName != null ? (
           <>
             <Divider />