diff --git a/components/src/atoms/ListItem/ListItem.stories.tsx b/components/src/atoms/ListItem/ListItem.stories.tsx
index 0738b583cde..dbe4739249d 100644
--- a/components/src/atoms/ListItem/ListItem.stories.tsx
+++ b/components/src/atoms/ListItem/ListItem.stories.tsx
@@ -50,7 +50,7 @@ export const ListItemDescriptorDefault: Story = {
     type: 'noActive',
     children: (
       <ListItemDescriptor
-        type="default"
+        type="large"
         content={<div>mock content</div>}
         description={<div>mock description</div>}
       />
@@ -63,7 +63,7 @@ export const ListItemDescriptorMini: Story = {
     type: 'noActive',
     children: (
       <ListItemDescriptor
-        type="mini"
+        type="default"
         content={<div>mock content</div>}
         description={<div>mock description</div>}
       />
diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
index 51d9ca9e181..12b494ea894 100644
--- a/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
+++ b/components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx
@@ -2,43 +2,34 @@ import { Flex } from '../../../primitives'
 import {
   ALIGN_FLEX_START,
   DIRECTION_ROW,
-  FLEX_AUTO,
   JUSTIFY_SPACE_BETWEEN,
 } from '../../../styles'
 import { SPACING } from '../../../ui-style-constants'
 
 interface ListItemDescriptorProps {
-  type: 'default' | 'mini'
+  type: 'default' | 'large'
   description: JSX.Element | string
   content: JSX.Element | string
+  isInSlideout?: boolean
 }
 
 export const ListItemDescriptor = (
   props: ListItemDescriptorProps
 ): JSX.Element => {
-  const { description, content, type } = props
+  const { description, content, type, isInSlideout = false } = props
   return (
     <Flex
       flexDirection={DIRECTION_ROW}
       gridGap={SPACING.spacing8}
       width="100%"
       alignItems={ALIGN_FLEX_START}
-      justifyContent={type === 'mini' ? JUSTIFY_SPACE_BETWEEN : 'none'}
-      padding={
-        type === 'mini'
-          ? `${SPACING.spacing4} ${SPACING.spacing8}`
-          : SPACING.spacing12
-      }
+      justifyContent={type === 'default' ? JUSTIFY_SPACE_BETWEEN : 'none'}
+      padding={type === 'default' ? SPACING.spacing4 : SPACING.spacing12}
     >
-      <Flex
-        flex={type === 'default' && '1'}
-        width={type === 'mini' ? FLEX_AUTO : '40%'}
-      >
+      <Flex minWidth={isInSlideout ? undefined : '13.75rem'}>
         {description}
       </Flex>
-      <Flex flex={type === 'default' && '1.95'} overflowWrap="anywhere">
-        {content}
-      </Flex>
+      <Flex width="100%">{content}</Flex>
     </Flex>
   )
 }
diff --git a/protocol-designer/src/atoms/constants.ts b/protocol-designer/src/atoms/constants.ts
index e5c73333cd8..e1acf21fddc 100644
--- a/protocol-designer/src/atoms/constants.ts
+++ b/protocol-designer/src/atoms/constants.ts
@@ -1,5 +1,6 @@
 import { css } from 'styled-components'
-import { COLORS } from '@opentrons/components'
+import { COLORS, OVERFLOW_HIDDEN } from '@opentrons/components'
+import type { FlattenSimpleInterpolation } from 'styled-components'
 
 export const BUTTON_LINK_STYLE = css`
   color: ${COLORS.grey60};
@@ -7,3 +8,14 @@ export const BUTTON_LINK_STYLE = css`
     color: ${COLORS.grey40};
   }
 `
+
+export const LINE_CLAMP_TEXT_STYLE = (
+  lineClamp: number
+): FlattenSimpleInterpolation => css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: ${OVERFLOW_HIDDEN};
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  -webkit-line-clamp: ${lineClamp};
+`
diff --git a/protocol-designer/src/organisms/MaterialsListModal/index.tsx b/protocol-designer/src/organisms/MaterialsListModal/index.tsx
index 0d5c90c1f4b..6fa69307eef 100644
--- a/protocol-designer/src/organisms/MaterialsListModal/index.tsx
+++ b/protocol-designer/src/organisms/MaterialsListModal/index.tsx
@@ -93,7 +93,7 @@ export function MaterialsListModal({
                 ? fixtures.map(fixture => (
                     <ListItem type="noActive" key={fixture.id}>
                       <ListItemDescriptor
-                        type="default"
+                        type="large"
                         description={
                           fixture.location != null ? (
                             <DeckInfoLabel
@@ -128,7 +128,7 @@ export function MaterialsListModal({
                   return (
                     <ListItem type="noActive" key={`hardware${id}`}>
                       <ListItemDescriptor
-                        type="default"
+                        type="large"
                         description={
                           <DeckInfoLabel deckLabel={formatLocation(hw.slot)} />
                         }
@@ -187,7 +187,7 @@ export function MaterialsListModal({
                   return (
                     <ListItem type="noActive" key={`labware_${lw.id}`}>
                       <ListItemDescriptor
-                        type="default"
+                        type="large"
                         description={
                           <DeckInfoLabel deckLabel={deckLabelSlot} />
                         }
diff --git a/protocol-designer/src/organisms/SlotInformation/index.tsx b/protocol-designer/src/organisms/SlotInformation/index.tsx
index 19c4e25f2e5..cd3550ed7d5 100644
--- a/protocol-designer/src/organisms/SlotInformation/index.tsx
+++ b/protocol-designer/src/organisms/SlotInformation/index.tsx
@@ -52,7 +52,7 @@ export const SlotInformation: React.FC<SlotInformationProps> = ({
         {liquids.length > 1 ? (
           <ListItem type="noActive">
             <ListItemDescriptor
-              type="mini"
+              type="default"
               content={liquids.join(', ')}
               description={t('liquid')}
             />
@@ -113,7 +113,7 @@ function StackInfo({ title, stackInformation }: StackInfoProps): JSX.Element {
   return (
     <ListItem type="noActive">
       <ListItemDescriptor
-        type="mini"
+        type="default"
         content={
           stackInformation != null ? (
             <StyledText
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 e536bc750be..e98727dd045 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
@@ -2,11 +2,12 @@ import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   COLORS,
-  DIRECTION_COLUMN,
   DeckInfoLabel,
+  DIRECTION_COLUMN,
   Divider,
   Flex,
   ListItem,
+  ListItemDescriptor,
   SPACING,
   StyledText,
 } from '@opentrons/components'
@@ -30,6 +31,7 @@ import {
   getModuleEntities,
 } from '../../../../../../step-forms/selectors'
 import { getModulesOnDeckByType } from '../../../../../../ui/modules/utils'
+import { LINE_CLAMP_TEXT_STYLE } from '../../../../../../atoms'
 
 import type { StepFormProps } from '../../types'
 
@@ -67,7 +69,6 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
           })
       : ''
   const engageHeightCaption = `${engageHeightMinMax} ${engageHeightDefault}`
-  // TODO (10-9-2024): Replace ListItem with ListItemDescriptor
   return (
     <Flex flexDirection={DIRECTION_COLUMN}>
       <Flex
@@ -80,22 +81,31 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
           {t('protocol_steps:module')}
         </StyledText>
         <ListItem type="noActive">
-          <Flex padding={SPACING.spacing12} gridGap={SPACING.spacing32}>
-            <Flex>
-              <DeckInfoLabel deckLabel={slotLocation} />
-            </Flex>
-            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {slotInfo[0]}
-              </StyledText>
-              <StyledText
-                desktopStyle="bodyDefaultRegular"
-                color={COLORS.grey60}
-              >
-                {slotInfo[1]}
-              </StyledText>
-            </Flex>
-          </Flex>
+          <ListItemDescriptor
+            type="large"
+            isInSlideout
+            content={
+              <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  css={LINE_CLAMP_TEXT_STYLE(2)}
+                >
+                  {slotInfo[0]}
+                </StyledText>
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  color={COLORS.grey60}
+                >
+                  {slotInfo[1]}
+                </StyledText>
+              </Flex>
+            }
+            description={
+              <Flex width="2.875rem">
+                <DeckInfoLabel deckLabel={slotLocation} />
+              </Flex>
+            }
+          />
         </ListItem>
       </Flex>
       <Divider marginY="0" />
diff --git a/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx b/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
index e87b6550904..cd1b5215ab1 100644
--- a/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
@@ -92,7 +92,7 @@ export function InstrumentsInfo({
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
         <ListItem type="noActive" key={`ProtocolOverview_robotType`}>
           <ListItemDescriptor
-            type="default"
+            type="large"
             description={t('robotType')}
             content={
               robotType === FLEX_ROBOT_TYPE
@@ -103,14 +103,14 @@ export function InstrumentsInfo({
         </ListItem>
         <ListItem type="noActive" key={`ProtocolOverview_left`}>
           <ListItemDescriptor
-            type="default"
+            type="large"
             description={t('left_pip')}
             content={pipetteInfo(leftPipette)}
           />
         </ListItem>
         <ListItem type="noActive" key={`ProtocolOverview_right`}>
           <ListItemDescriptor
-            type="default"
+            type="large"
             description={t('right_pip')}
             content={pipetteInfo(rightPipette)}
           />
@@ -118,7 +118,7 @@ export function InstrumentsInfo({
         {robotType === FLEX_ROBOT_TYPE ? (
           <ListItem type="noActive" key={`ProtocolOverview_gripper`}>
             <ListItemDescriptor
-              type="default"
+              type="large"
               description={t('extension')}
               content={isGripperAttached ? t('gripper') : t('na')}
             />
diff --git a/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx b/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
index 03c274ce104..fc767242929 100644
--- a/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
@@ -1,5 +1,4 @@
 import { useTranslation } from 'react-i18next'
-import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
@@ -8,10 +7,10 @@ import {
   LiquidIcon,
   ListItem,
   ListItemDescriptor,
-  OVERFLOW_HIDDEN,
   SPACING,
   StyledText,
 } from '@opentrons/components'
+import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 
 import type { AllIngredGroupFields } from '../../labware-ingred/types'
 
@@ -36,7 +35,7 @@ export function LiquidDefinitions({
               key={`${liquid.name}_${liquid.displayColor}_${index}`}
             >
               <ListItemDescriptor
-                type="default"
+                type="large"
                 description={
                   <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
                     <LiquidIcon color={liquid.displayColor} />
@@ -44,7 +43,7 @@ export function LiquidDefinitions({
                       desktopStyle="bodyDefaultRegular"
                       overflowWrap="anywhere"
                       id="liquid-name"
-                      css={LIQUID_DEFINITION_TEXT}
+                      css={LINE_CLAMP_TEXT_STYLE(3)}
                     >
                       {liquid.name}
                     </StyledText>
@@ -61,11 +60,3 @@ export function LiquidDefinitions({
     </Flex>
   )
 }
-
-const LIQUID_DEFINITION_TEXT = css`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: ${OVERFLOW_HIDDEN};
-  text-overflow: ellipsis;
-`
diff --git a/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx b/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
index 7bb26264b8f..69d8697765b 100644
--- a/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
@@ -61,7 +61,7 @@ export function ProtocolMetadata({
           return (
             <ListItem type="noActive" key={`ProtocolOverview_${title}`}>
               <ListItemDescriptor
-                type="default"
+                type="large"
                 description={t(`${title}`)}
                 content={value ?? t('na')}
               />
@@ -70,7 +70,7 @@ export function ProtocolMetadata({
         })}
         <ListItem type="noActive" key="ProtocolOverview_robotVersion">
           <ListItemDescriptor
-            type="default"
+            type="large"
             description={t('required_app_version')}
             content={t('app_version', {
               version: REQUIRED_APP_VERSION,
diff --git a/protocol-designer/src/pages/ProtocolOverview/StepsInfo.tsx b/protocol-designer/src/pages/ProtocolOverview/StepsInfo.tsx
index e0385336251..3eacf7beeba 100644
--- a/protocol-designer/src/pages/ProtocolOverview/StepsInfo.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/StepsInfo.tsx
@@ -33,7 +33,7 @@ export function StepsInfo({ savedStepForms }: StepsInfoProps): JSX.Element {
         ) : (
           <ListItem type="noActive" key="ProtocolOverview_Step">
             <ListItemDescriptor
-              type="default"
+              type="large"
               description={
                 <StyledText
                   desktopStyle="bodyDefaultRegular"
diff --git a/protocol-designer/src/pages/ProtocolOverview/index.tsx b/protocol-designer/src/pages/ProtocolOverview/index.tsx
index 7f9969575c5..29e72aa171f 100644
--- a/protocol-designer/src/pages/ProtocolOverview/index.tsx
+++ b/protocol-designer/src/pages/ProtocolOverview/index.tsx
@@ -41,7 +41,7 @@ import {
   getUnusedTrash,
 } from '../../components/FileSidebar/utils'
 import { MaterialsListModal } from '../../organisms/MaterialsListModal'
-import { BUTTON_LINK_STYLE } from '../../atoms'
+import { BUTTON_LINK_STYLE, LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 import { getMainPagePortalEl } from '../../components/portals/MainPageModalPortal'
 import {
   EditProtocolMetadataModal,
@@ -292,7 +292,7 @@ export function ProtocolOverview(): JSX.Element {
           <Flex flex="1">
             <StyledText
               desktopStyle="displayBold"
-              css={PROTOCOL_NAME_TEXT_STYLE}
+              css={LINE_CLAMP_TEXT_STYLE(3)}
             >
               {protocolName != null && protocolName !== ''
                 ? protocolName
@@ -418,15 +418,6 @@ export function ProtocolOverview(): JSX.Element {
   )
 }
 
-const PROTOCOL_NAME_TEXT_STYLE = css`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  -webkit-line-clamp: 3;
-`
-
 const MIN_OVERVIEW_WIDTH = '64rem'
 const COLUMN_GRID_GAP = '5rem'
 const COLUMN_STYLE = css`