diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 79287acc49f..1f5f5d0ac64 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react'
 import get from 'lodash/get'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-
 import {
   ALIGN_CENTER,
   Btn,
@@ -24,7 +23,7 @@ import { RenameStepModal } from '../../../../organisms/RenameStepModal'
 import { getFormWarningsForSelectedStep } from '../../../../dismiss/selectors'
 import { getTimelineWarningsForSelectedStep } from '../../../../top-selectors/timelineWarnings'
 import { getRobotStateTimeline } from '../../../../file-data/selectors'
-import { BUTTON_LINK_STYLE } from '../../../../atoms'
+import { BUTTON_LINK_STYLE, LINE_CLAMP_TEXT_STYLE } from '../../../../atoms'
 import {
   CommentTools,
   HeaterShakerTools,
@@ -231,8 +230,14 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         }
         title={
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
-            <Icon size="1rem" name={icon} />
-            <StyledText desktopStyle="bodyLargeSemiBold">
+            <Icon size="1rem" name={icon} minWidth="1rem" />
+            <StyledText
+              desktopStyle="bodyLargeSemiBold"
+              css={`
+                ${LINE_CLAMP_TEXT_STYLE(2)}
+                word-break: break-all
+              `}
+            >
               {i18n.format(t(formData.stepName), 'capitalize')}
             </StyledText>
           </Flex>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
index 18938c3975b..7d76fc02ae2 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -5,23 +5,20 @@ import flatten from 'lodash/flatten'
 import last from 'lodash/last'
 import {
   ALIGN_CENTER,
-  BORDERS,
-  COLORS,
   DIRECTION_COLUMN,
   Flex,
-  FLEX_MAX_CONTENT,
+  ListItem,
   SPACING,
   StyledText,
   Tag,
 } from '@opentrons/components'
 import { getModuleDisplayName } from '@opentrons/shared-data'
-
 import {
   getLabwareEntities,
   getModuleEntities,
 } from '../../../step-forms/selectors'
 import { getLabwareNicknamesById } from '../../../ui/labware/selectors'
-
+import { LINE_CLAMP_TEXT_STYLE } from '../../../atoms'
 import type { FormData } from '../../../form-types'
 
 interface StyledTransProps {
@@ -29,11 +26,19 @@ interface StyledTransProps {
   tagText?: string
   values?: object
 }
+
 function StyledTrans(props: StyledTransProps): JSX.Element {
   const { i18nKey, tagText, values } = props
   const { t } = useTranslation(['protocol_steps', 'application'])
   return (
-    <Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
+    <Flex
+      gridGap={SPACING.spacing4}
+      alignItems={ALIGN_CENTER}
+      css={`
+        flex-wrap: wrap;
+        word-break: break-word;
+      `}
+    >
       <Trans
         t={t}
         i18nKey={i18nKey}
@@ -386,25 +391,21 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
       width="100%"
     >
       {stepSummaryContent != null ? (
-        <Flex
-          backgroundColor={COLORS.grey30}
-          padding={SPACING.spacing12}
-          borderRadius={BORDERS.borderRadius4}
-          width={FLEX_MAX_CONTENT}
-          minWidth="100%"
-        >
-          {stepSummaryContent}
-        </Flex>
+        <ListItem type="noActive">
+          <Flex padding={SPACING.spacing12}>{stepSummaryContent}</Flex>
+        </ListItem>
       ) : null}
       {stepDetails != null && stepDetails !== '' ? (
-        <StyledText
-          backgroundColor={COLORS.grey30}
-          padding={SPACING.spacing12}
-          borderRadius={BORDERS.borderRadius4}
-          desktopStyle="bodyDefaultRegular"
-        >
-          {stepDetails}
-        </StyledText>
+        <ListItem type="noActive">
+          <Flex padding={SPACING.spacing12}>
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              css={LINE_CLAMP_TEXT_STYLE(3)}
+            >
+              {stepDetails}
+            </StyledText>
+          </Flex>
+        </ListItem>
       ) : null}
     </Flex>
   ) : null
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
index 039c09220c2..c869fdf72dd 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -30,6 +30,7 @@ import {
   populateForm,
 } from '../../../../ui/steps/actions/actions'
 import { getMultiSelectItemIds } from '../../../../ui/steps/selectors'
+import { LINE_CLAMP_TEXT_STYLE } from '../../../../atoms'
 import { StepOverflowMenu } from './StepOverflowMenu'
 import { capitalizeFirstLetterAfterNumber } from './utils'
 
@@ -217,9 +218,20 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
               width="100%"
             >
               {iconName && (
-                <Icon size="1rem" name={iconName} color={iconColor ?? color} />
+                <Icon
+                  size="1rem"
+                  name={iconName}
+                  color={iconColor ?? color}
+                  minWidth="1rem"
+                />
               )}
-              <StyledText desktopStyle="bodyDefaultRegular">
+              <StyledText
+                desktopStyle="bodyDefaultRegular"
+                css={`
+                  ${LINE_CLAMP_TEXT_STYLE(1)}
+                  word-break: break-all
+                `}
+              >
                 {capitalizeFirstLetterAfterNumber(title)}
               </StyledText>
             </Flex>