fix(app): fix long file name issue (#16039)

* fix(app): fix long file name issue
Opentrons · Aug 19, 2024 · 9b93b82 · 9b93b82
1 parent 56faf0f
commit 9b93b82
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/app/src/organisms/ProtocolSetupParameters/ViewOnlyParameters.tsx b/app/src/organisms/ProtocolSetupParameters/ViewOnlyParameters.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { css } from 'styled-components'
+
 import {
   formatRunTimeParameterValue,
   sortRuntimeParameters,
@@ -93,7 +95,7 @@ export function ViewOnlyParameters({
                 flexDirection={DIRECTION_ROW}
                 gridGap={SPACING.spacing8}
               >
-                <LegacyStyledText as="p" color={COLORS.grey60}>
+                <LegacyStyledText as="p" css={PARAMETER_VALUE_STYLE}>
                   {formatRunTimeParameterValue(parameter, t)}
                 </LegacyStyledText>
                 {parameter.type === 'csv_file' ||
@@ -114,3 +116,14 @@ export function ViewOnlyParameters({
     </>
   )
 }
+
+const PARAMETER_VALUE_STYLE = css`
+  color: ${COLORS.grey60};
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  -webkit-line-clamp: 1;
+  max-width: 15rem;
+`