From daf52569b5ad71ba1524461997c0e2feb682b3f6 Mon Sep 17 00:00:00 2001
From: shiyaochen <shiyaochen@admins-MacBook-Pro.local>
Date: Mon, 21 Oct 2024 10:37:11 -0400
Subject: [PATCH 1/7] fix(protocol-designer): fix long step name layout issue

---
 .../ProtocolSteps/StepForm/StepFormToolbox.tsx   | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 709cff49d7c..ffa323d2773 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -9,6 +9,7 @@ import {
   COLORS,
   Flex,
   Icon,
+  OVERFLOW_HIDDEN,
   POSITION_RELATIVE,
   PrimaryButton,
   SPACING,
@@ -40,6 +41,7 @@ import { getSaveStepSnackbarText } from './utils'
 import type { StepFieldName } from '../../../../steplist/fieldLevel'
 import type { FormData, StepType } from '../../../../form-types'
 import type { FieldPropsByName, FocusHandlers, StepFormProps } from './types'
+import { css } from 'styled-components'
 
 type StepFormMap = {
   [K in StepType]?: React.ComponentType<StepFormProps> | null
@@ -209,8 +211,8 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         height="calc(100vh - 64px)"
         title={
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
-            <Icon size="1rem" name={icon} />
-            <StyledText desktopStyle="bodyLargeSemiBold">
+            <Icon size="1rem" name={icon}  style={{ flexShrink: 0 }}/>
+            <StyledText desktopStyle="bodyLargeSemiBold" css={MENU_TEXT_STYLE}>
               {i18n.format(t(formData.stepName), 'capitalize')}
             </StyledText>
           </Flex>
@@ -229,3 +231,13 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
     </>
   )
 }
+
+const MENU_TEXT_STYLE = css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: ${OVERFLOW_HIDDEN};
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  -webkit-line-clamp: 2;
+  word-break: break-all;
+`

From dc5f7b08069f6c07b6e678abbf4f15bf0221c981 Mon Sep 17 00:00:00 2001
From: shiyaochen <shiyaochen@admins-MacBook-Pro.local>
Date: Mon, 21 Oct 2024 13:42:29 -0400
Subject: [PATCH 2/7] update StepContainer

---
 .../StepForm/StepFormToolbox.tsx              |  2 +-
 .../ProtocolSteps/Timeline/StepContainer.tsx  | 24 +++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index ffa323d2773..7c782446907 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -211,7 +211,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         height="calc(100vh - 64px)"
         title={
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
-            <Icon size="1rem" name={icon}  style={{ flexShrink: 0 }}/>
+            <Icon size="1rem" name={icon} style={{ flexShrink: 0 }} />
             <StyledText desktopStyle="bodyLargeSemiBold" css={MENU_TEXT_STYLE}>
               {i18n.format(t(formData.stepName), 'capitalize')}
             </StyledText>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
index 2a9330b4a15..d5224f920d8 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -12,6 +12,7 @@ import {
   Icon,
   JUSTIFY_SPACE_BETWEEN,
   JUSTIFY_START,
+  OVERFLOW_HIDDEN,
   OverflowBtn,
   SPACING,
   StyledText,
@@ -21,6 +22,7 @@ import { StepOverflowMenu } from './StepOverflowMenu'
 import { capitalizeFirstLetterAfterNumber } from './utils'
 
 import type { IconName } from '@opentrons/components'
+import { css } from 'styled-components'
 
 const STARTING_DECK_STATE = 'Starting deck state'
 const FINAL_DECK_STATE = 'Final deck state'
@@ -141,9 +143,17 @@ 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}
+                  style={{ flexShrink: 0 }}
+                />
               )}
-              <StyledText desktopStyle="bodyDefaultRegular">
+              <StyledText
+                desktopStyle="bodyDefaultRegular"
+                css={MENU_TEXT_STYLE}
+              >
                 {capitalizeFirstLetterAfterNumber(title)}
               </StyledText>
             </Flex>
@@ -176,3 +186,13 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
     </>
   )
 }
+
+const MENU_TEXT_STYLE = css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: ${OVERFLOW_HIDDEN};
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  word-break: break-all;
+`

From f197088c029cc4b7185d135dd917a5047f482524 Mon Sep 17 00:00:00 2001
From: shiyaochen <shiyaochen@admins-MacBook-Pro.local>
Date: Tue, 22 Oct 2024 14:56:51 -0400
Subject: [PATCH 3/7] update StepSummary to have long step details display a
 max of 4 lines

---
 .../Designer/ProtocolSteps/StepSummary.tsx    | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
index e993496dba3..07a4048ea47 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -10,6 +10,8 @@ import {
   DIRECTION_COLUMN,
   Flex,
   FLEX_MAX_CONTENT,
+  ListItem,
+  OVERFLOW_HIDDEN,
   SPACING,
   StyledText,
   Tag,
@@ -23,6 +25,7 @@ import {
 import { getLabwareNicknamesById } from '../../../ui/labware/selectors'
 
 import type { FormData } from '../../../form-types'
+import { css } from 'styled-components'
 
 interface StyledTransProps {
   i18nKey: string
@@ -399,15 +402,23 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
         </Flex>
       ) : 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={MENU_TEXT_STYLE}>
+              {stepDetails}
+            </StyledText>
+          </Flex>
+        </ListItem>
       ) : null}
     </Flex>
   ) : null
 }
+
+const MENU_TEXT_STYLE = css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: ${OVERFLOW_HIDDEN};
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  -webkit-line-clamp: 4;
+`

From 4a528933add359ddc59c861d17eb48c26adae5d5 Mon Sep 17 00:00:00 2001
From: shiyaochen <shiyaochen@admins-MacBook-Pro.local>
Date: Tue, 22 Oct 2024 16:18:29 -0400
Subject: [PATCH 4/7] format import

---
 .../pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx  | 3 +--
 .../src/pages/Designer/ProtocolSteps/StepSummary.tsx           | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 7c782446907..6c79a10f30a 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import get from 'lodash/get'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-
+import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
   Btn,
@@ -41,7 +41,6 @@ import { getSaveStepSnackbarText } from './utils'
 import type { StepFieldName } from '../../../../steplist/fieldLevel'
 import type { FormData, StepType } from '../../../../form-types'
 import type { FieldPropsByName, FocusHandlers, StepFormProps } from './types'
-import { css } from 'styled-components'
 
 type StepFormMap = {
   [K in StepType]?: React.ComponentType<StepFormProps> | null
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
index 07a4048ea47..c1151c15caf 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -1,5 +1,6 @@
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
 import first from 'lodash/first'
 import flatten from 'lodash/flatten'
 import last from 'lodash/last'
@@ -23,9 +24,7 @@ import {
   getModuleEntities,
 } from '../../../step-forms/selectors'
 import { getLabwareNicknamesById } from '../../../ui/labware/selectors'
-
 import type { FormData } from '../../../form-types'
-import { css } from 'styled-components'
 
 interface StyledTransProps {
   i18nKey: string

From 313b519ff599251115e8496db807dfdf4f95b2c8 Mon Sep 17 00:00:00 2001
From: shiyaochen <shiyaochen@admins-MacBook-Pro.local>
Date: Wed, 23 Oct 2024 10:02:25 -0400
Subject: [PATCH 5/7] use minWidth

---
 .../pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx   | 2 +-
 .../src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 6c79a10f30a..8087dbff69d 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -210,7 +210,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         height="calc(100vh - 64px)"
         title={
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
-            <Icon size="1rem" name={icon} style={{ flexShrink: 0 }} />
+            <Icon size="1rem" name={icon} minWidth="1rem" />
             <StyledText desktopStyle="bodyLargeSemiBold" css={MENU_TEXT_STYLE}>
               {i18n.format(t(formData.stepName), 'capitalize')}
             </StyledText>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
index ee0c0695a5d..822fd99bc08 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -223,7 +223,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
                   size="1rem"
                   name={iconName}
                   color={iconColor ?? color}
-                  style={{ flexShrink: 0 }}
+                  minWidth="1rem"
                 />
               )}
               <StyledText

From 91cbd31136346df88a2df464630395de59a4cc9b Mon Sep 17 00:00:00 2001
From: shiyaochen <shiyaochen@admins-MacBook-Pro.local>
Date: Wed, 23 Oct 2024 12:11:25 -0400
Subject: [PATCH 6/7] use LINE_CLAMP_TEXT_STYLE

---
 .../StepForm/StepFormToolbox.tsx              | 22 +++++--------
 .../Designer/ProtocolSteps/StepSummary.tsx    | 33 +++++--------------
 .../ProtocolSteps/Timeline/StepContainer.tsx  | 18 +++-------
 3 files changed, 21 insertions(+), 52 deletions(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
index 11ae549d7b0..35ec0ea5088 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -2,14 +2,12 @@ import { useState } from 'react'
 import get from 'lodash/get'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
   Btn,
   COLORS,
   Flex,
   Icon,
-  OVERFLOW_HIDDEN,
   POSITION_RELATIVE,
   PrimaryButton,
   SPACING,
@@ -25,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,
@@ -210,7 +208,13 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         title={
           <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
             <Icon size="1rem" name={icon} minWidth="1rem" />
-            <StyledText desktopStyle="bodyLargeSemiBold" css={MENU_TEXT_STYLE}>
+            <StyledText
+              desktopStyle="bodyLargeSemiBold"
+              css={`
+                ${LINE_CLAMP_TEXT_STYLE(2)}
+                word-break: break-all
+              `}
+            >
               {i18n.format(t(formData.stepName), 'capitalize')}
             </StyledText>
           </Flex>
@@ -229,13 +233,3 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
     </>
   )
 }
-
-const MENU_TEXT_STYLE = css`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: ${OVERFLOW_HIDDEN};
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  -webkit-line-clamp: 2;
-  word-break: break-all;
-`
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
index e595661d039..65d5ae447fe 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -1,29 +1,24 @@
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
-import { css } from 'styled-components'
 import first from 'lodash/first'
 import flatten from 'lodash/flatten'
 import last from 'lodash/last'
 import {
   ALIGN_CENTER,
-  BORDERS,
-  COLORS,
   DIRECTION_COLUMN,
   Flex,
-  FLEX_MAX_CONTENT,
   ListItem,
-  OVERFLOW_HIDDEN,
   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 {
@@ -390,20 +385,17 @@ 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 !== '' ? (
         <ListItem type="noActive">
           <Flex padding={SPACING.spacing12}>
-            <StyledText desktopStyle="bodyDefaultRegular" css={MENU_TEXT_STYLE}>
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              css={LINE_CLAMP_TEXT_STYLE(3)}
+            >
               {stepDetails}
             </StyledText>
           </Flex>
@@ -412,12 +404,3 @@ export function StepSummary(props: StepSummaryProps): JSX.Element | null {
     </Flex>
   ) : null
 }
-
-const MENU_TEXT_STYLE = css`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: ${OVERFLOW_HIDDEN};
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  -webkit-line-clamp: 4;
-`
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
index 822fd99bc08..c869fdf72dd 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useDispatch, useSelector } from 'react-redux'
-import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -14,7 +13,6 @@ import {
   Icon,
   JUSTIFY_SPACE_BETWEEN,
   JUSTIFY_START,
-  OVERFLOW_HIDDEN,
   OverflowBtn,
   SPACING,
   StyledText,
@@ -32,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'
 
@@ -228,7 +227,10 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
               )}
               <StyledText
                 desktopStyle="bodyDefaultRegular"
-                css={MENU_TEXT_STYLE}
+                css={`
+                  ${LINE_CLAMP_TEXT_STYLE(1)}
+                  word-break: break-all
+                `}
               >
                 {capitalizeFirstLetterAfterNumber(title)}
               </StyledText>
@@ -266,13 +268,3 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
     </>
   )
 }
-
-const MENU_TEXT_STYLE = css`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: ${OVERFLOW_HIDDEN};
-  text-overflow: ellipsis;
-  word-wrap: break-word;
-  -webkit-line-clamp: 1;
-  word-break: break-all;
-`

From 763477bd1c4638370fbff21104dd25560f155fa6 Mon Sep 17 00:00:00 2001
From: shiyaochen <shiyaochen@admins-MacBook-Pro.local>
Date: Thu, 24 Oct 2024 10:30:46 -0400
Subject: [PATCH 7/7] update stepSummary to use flex-wrap

---
 .../src/pages/Designer/ProtocolSteps/StepSummary.tsx   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
index 65d5ae447fe..b4d64fd19a9 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepSummary.tsx
@@ -26,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}