fix(components) fix Chip height issue and Parameters table display is…

…sue (#16042) * fix(components) fix Chip height issue and Parameters table display issue
Opentrons · Aug 20, 2024 · b31ea79 · b31ea79
1 parent ba8692a
commit b31ea79
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
@@ -218,8 +218,12 @@ const StyledTableRowComponent = (
         ) : null}
       </StyledTableCell>
       <StyledTableCell>
-        <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
-          <LegacyStyledText as="p">
+        <Flex
+          flexDirection={DIRECTION_ROW}
+          gridGap={SPACING.spacing16}
+          alignItems={ALIGN_CENTER}
+        >
+          <LegacyStyledText as="p" css={PARAMETER_VALUE_TEXT_STYLE}>
             {parameter.type === 'csv_file'
               ? parameter.file?.name ?? ''
               : formatRunTimeParameterValue(parameter, t)}
@@ -279,3 +283,12 @@ const StyledTableCell = styled.td<StyledTableCellProps>`
   padding-right: ${props =>
     props.paddingRight != null ? props.paddingRight : SPACING.spacing16};
 `
+
+const PARAMETER_VALUE_TEXT_STYLE = css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+`
diff --git a/components/src/atoms/Chip/index.tsx b/components/src/atoms/Chip/index.tsx
@@ -3,7 +3,7 @@ import { css } from 'styled-components'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
 import { LegacyStyledText } from '../StyledText'
-import { ALIGN_CENTER, DIRECTION_ROW } from '../../styles'
+import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { Icon } from '../../icons'
 
@@ -91,6 +91,7 @@ export function Chip(props: ChipProps): JSX.Element {
   const MEDIUM_CONTAINER_STYLE = css`
     padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
     grid-gap: ${SPACING.spacing4};
+
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
       padding: ${SPACING.spacing8}
         ${background === false ? 0 : SPACING.spacing16};
@@ -101,6 +102,7 @@ export function Chip(props: ChipProps): JSX.Element {
   const SMALL_CONTAINER_STYLE = css`
     padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
     grid-gap: ${SPACING.spacing4};
+
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
       padding: ${SPACING.spacing4}
         ${background === false ? 0 : SPACING.spacing8};
@@ -111,6 +113,7 @@ export function Chip(props: ChipProps): JSX.Element {
   const ICON_STYLE = css`
     width: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
     height: ${chipSize === 'medium' ? '1rem' : '0.75rem'};
+
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
       width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
       height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
@@ -119,6 +122,7 @@ export function Chip(props: ChipProps): JSX.Element {
 
   const TEXT_STYLE = css`
     ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
+
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
       ${chipSize === 'medium'
         ? TYPOGRAPHY.bodyTextSemiBold
@@ -132,6 +136,7 @@ export function Chip(props: ChipProps): JSX.Element {
       backgroundColor={backgroundColor}
       borderRadius={CHIP_PROPS_BY_TYPE[type].borderRadius}
       flexDirection={DIRECTION_ROW}
+      height={FLEX_MAX_CONTENT}
       css={
         chipSize === 'medium' ? MEDIUM_CONTAINER_STYLE : SMALL_CONTAINER_STYLE
       }