From 5bd0b5cbfd363ad2b559bcf9f88994f64a4f0022 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Wed, 23 Oct 2024 19:06:02 -0400
Subject: [PATCH] fix(protocol-designer): fix ListItemDescriptor content and
 description alignment issue

fix ListItemDescriptor content and description alignment issue

close RQA-3424
---
 .../ListItemChildren/ListItemDescriptor.tsx   |  9 +++----
 .../src/organisms/SlotInformation/index.tsx   | 26 ++++++++-----------
 .../StepForm/StepTools/MagnetTools/index.tsx  |  1 -
 3 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
index 12b494ea894..78d0e50869e 100644
--- a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
+++ b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
@@ -10,13 +10,12 @@ interface ListItemDescriptorProps {
   type: 'default' | 'large'
   description: JSX.Element | string
   content: JSX.Element | string
-  isInSlideout?: boolean
 }
 
 export const ListItemDescriptor = (
   props: ListItemDescriptorProps
 ): JSX.Element => {
-  const { description, content, type, isInSlideout = false } = props
+  const { description, content, type } = props
   return (
     <Flex
       flexDirection={DIRECTION_ROW}
@@ -26,10 +25,8 @@ export const ListItemDescriptor = (
       justifyContent={type === 'default' ? JUSTIFY_SPACE_BETWEEN : 'none'}
       padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
     >
-      <Flex minWidth={isInSlideout ? undefined : '13.75rem'}>
-        {description}
-      </Flex>
-      <Flex width="100%">{content}</Flex>
+      {description}
+      {content}
     </Flex>
   )
 }
diff --git a/protocol-designer/src/organisms/SlotInformation/index.tsx b/protocol-designer/src/organisms/SlotInformation/index.tsx
index cd3550ed7d5..a8bfcc3a840 100644
--- a/protocol-designer/src/organisms/SlotInformation/index.tsx
+++ b/protocol-designer/src/organisms/SlotInformation/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 import {
@@ -12,6 +11,7 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
+import type { FC } from 'react'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 import type { RobotType } from '@opentrons/shared-data'
 
@@ -25,7 +25,7 @@ interface SlotInformationProps {
   fixtures?: string[]
 }
 
-export const SlotInformation: React.FC<SlotInformationProps> = ({
+export const SlotInformation: FC<SlotInformationProps> = ({
   location,
   robotType,
   liquids = [],
@@ -50,10 +50,10 @@ export const SlotInformation: React.FC<SlotInformationProps> = ({
       </Flex>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
         {liquids.length > 1 ? (
-          <ListItem type="noActive">
+          <ListItem type="noActive" width="max-content">
             <ListItemDescriptor
               type="default"
-              content={liquids.join(', ')}
+              content={<StyledText>liquids.join(', ')</StyledText>}
               description={t('liquid')}
             />
           </ListItem>
@@ -115,18 +115,14 @@ function StackInfo({ title, stackInformation }: StackInfoProps): JSX.Element {
       <ListItemDescriptor
         type="default"
         content={
-          stackInformation != null ? (
-            <StyledText
-              desktopStyle="bodyDefaultRegular"
-              textAlign={TYPOGRAPHY.textAlignRight}
-            >
-              {stackInformation}
-            </StyledText>
-          ) : (
-            t('none')
-          )
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            textAlign={TYPOGRAPHY.textAlignRight}
+          >
+            {stackInformation ?? t('none')}
+          </StyledText>
         }
-        description={title}
+        description={<Flex width="7.40625rem">{title}</Flex>}
       />
     </ListItem>
   )
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx
index 42768144177..2468923d9c2 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx
@@ -83,7 +83,6 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
         <ListItem type="noActive">
           <ListItemDescriptor
             type="large"
-            isInSlideout
             content={
               <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
                 <StyledText