fix(protocol-designer): fix long step name, step details, and step su…

…mmary layout issue (#16547)

fixes RQA-3355

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

Fixing layout issues in `StepFormToolbox`, `StepContainer`, and
`StepSummary` when step names, step details, and step summaries are too
long, causing the step icon to shrink, the step name and step summaries
content to go off-screen, and the step details text to exceed the window
size.

Refer to the ticket for details on the current layout issues and the
expected design.

## Test Plan and Hands on Testing

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->

## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

---------

Co-authored-by: shiyaochen <[email protected]>

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>

protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx

@@ -5,35 +5,40 @@ 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 {
   i18nKey: string
   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

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>