diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index f101237cb45..35ec0ea5088 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,
@@ -208,8 +207,14 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
}
title={
-
-
+
+
{i18n.format(t(formData.stepName), 'capitalize')}
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
index 0d78ea5dc08..b4d64fd19a9 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 (
-
+
{stepSummaryContent != null ? (
-
- {stepSummaryContent}
-
+
+ {stepSummaryContent}
+
) : null}
{stepDetails != null && stepDetails !== '' ? (
-
- {stepDetails}
-
+
+
+
+ {stepDetails}
+
+
+
) : null}
) : 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 && (
-
+
)}
-
+
{capitalizeFirstLetterAfterNumber(title)}