From 66b1a3bdb532cfea384b4f88db5c301d79c4405e Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:54:05 -0400
Subject: [PATCH] fix(app, components): fix parameter table styling (#14809)

---
 .../ProtocolRunRunTimeParameters.tsx          | 87 ++++++++++---------
 .../src/molecules/ParametersTable/index.tsx   | 74 +++++++++-------
 2 files changed, 92 insertions(+), 69 deletions(-)

diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
index 2769cfdc313..09511fe8862 100644
--- a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { formatRunTimeParameterDefaultValue } from '@opentrons/shared-data'
 import {
   ALIGN_CENTER,
@@ -9,6 +9,7 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
+  DISPLAY_INLINE,
   Flex,
   Icon,
   InfoScreen,
@@ -96,7 +97,7 @@ export function ProtocolRunRuntimeParameters({
                       key={`${index}_${parameter.variableName}`}
                       parameter={parameter}
                       index={index}
-                      runTimeParametersLength={runTimeParameters.length}
+                      isLast={index === runTimeParameters.length - 1}
                       t={t}
                     />
                   )
@@ -113,41 +114,48 @@ export function ProtocolRunRuntimeParameters({
 interface StyledTableRowComponentProps {
   parameter: RunTimeParameter
   index: number
-  runTimeParametersLength: number
+  isLast: boolean
   t: any
 }
 
 const StyledTableRowComponent = (
   props: StyledTableRowComponentProps
 ): JSX.Element => {
-  const { parameter, index, runTimeParametersLength, t } = props
+  const { parameter, index, isLast, t } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
   return (
-    <StyledTableRow
-      isLast={index === runTimeParametersLength - 1}
-      key={`runTimeParameter-${index}`}
-    >
-      <StyledTableCell isLast={index === runTimeParametersLength - 1}>
-        <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8}>
-          <StyledText as="p">{parameter.displayName}</StyledText>
-          {parameter.description != null ? (
-            <>
-              <Flex {...targetProps} alignItems={ALIGN_CENTER}>
-                <Icon
-                  name="information"
-                  size={SPACING.spacing12}
-                  color={COLORS.grey60}
-                  data-testid="Icon"
-                />
-              </Flex>
-              <Tooltip tooltipProps={tooltipProps}>
-                {parameter.description}
-              </Tooltip>
-            </>
-          ) : null}
-        </Flex>
+    <StyledTableRow isLast={isLast} key={`runTimeParameter-${index}`}>
+      <StyledTableCell display="span">
+        <StyledText
+          as="p"
+          css={css`
+            display: inline;
+            padding-right: 8px;
+          `}
+        >
+          {parameter.displayName}
+        </StyledText>
+        {parameter.description != null ? (
+          <>
+            <Flex
+              display={DISPLAY_INLINE}
+              {...targetProps}
+              alignItems={ALIGN_CENTER}
+            >
+              <Icon
+                name="information"
+                size={SPACING.spacing12}
+                color={COLORS.grey60}
+                data-testid="Icon"
+              />
+            </Flex>
+            <Tooltip css={TYPOGRAPHY.labelRegular} tooltipProps={tooltipProps}>
+              {parameter.description}
+            </Tooltip>
+          </>
+        ) : null}
       </StyledTableCell>
-      <StyledTableCell isLast={index === runTimeParametersLength - 1}>
+      <StyledTableCell>
         <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
           <StyledText as="p">
             {formatRunTimeParameterDefaultValue(parameter, t)}
@@ -173,14 +181,14 @@ const StyledTable = styled.table`
 `
 const StyledTableHeaderContainer = styled.thead`
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 48px;
+  grid-template-columns: 0.35fr 0.35fr;
+  grid-gap: ${SPACING.spacing48};
   border-bottom: ${BORDERS.lineBorder};
 `
 
 const StyledTableHeader = styled.th`
   ${TYPOGRAPHY.labelSemiBold}
-  padding: ${SPACING.spacing8};
+  padding-bottom: ${SPACING.spacing8};
 `
 
 interface StyledTableRowProps {
@@ -189,19 +197,20 @@ interface StyledTableRowProps {
 
 const StyledTableRow = styled.tr<StyledTableRowProps>`
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 48px;
-  padding-top: ${SPACING.spacing8};
-  padding-bottom: ${SPACING.spacing8};
+  grid-template-columns: 0.35fr 0.35fr;
+  grid-gap: ${SPACING.spacing48};
   border-bottom: ${props => (props.isLast ? 'none' : BORDERS.lineBorder)};
-  align-items: ${ALIGN_CENTER};
 `
 
 interface StyledTableCellProps {
-  isLast: boolean
+  paddingRight?: string
+  display?: string
 }
 
 const StyledTableCell = styled.td<StyledTableCellProps>`
-  padding-left: ${SPACING.spacing8};
-  height: 1.25rem;
+  align-items: ${ALIGN_CENTER};
+  display: ${props => (props.display != null ? props.display : 'table-cell')};
+  padding: ${SPACING.spacing8} 0;
+  padding-right: ${props =>
+    props.paddingRight != null ? props.paddingRight : SPACING.spacing16};
 `
diff --git a/components/src/molecules/ParametersTable/index.tsx b/components/src/molecules/ParametersTable/index.tsx
index 03731f0e32f..4ca8d8a2cb0 100644
--- a/components/src/molecules/ParametersTable/index.tsx
+++ b/components/src/molecules/ParametersTable/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { formatRunTimeParameterDefaultValue } from '@opentrons/shared-data'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants/index'
@@ -7,7 +7,7 @@ import { StyledText } from '../../atoms/StyledText'
 import { Tooltip, useHoverTooltip } from '../../tooltips'
 import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
-import { ALIGN_CENTER } from '../../styles'
+import { DISPLAY_INLINE } from '../../styles'
 
 import type { RunTimeParameter } from '@opentrons/shared-data'
 
@@ -82,7 +82,10 @@ export function ParametersTable({
                   {formatRunTimeParameterDefaultValue(parameter, t)}
                 </StyledText>
               </StyledTableCell>
-              <StyledTableCell isLast={index === runTimeParameters.length - 1}>
+              <StyledTableCell
+                isLast={index === runTimeParameters.length - 1}
+                paddingRight="0"
+              >
                 <StyledText as="p">
                   {formatRange(parameter, `${min}-${max}`)}
                 </StyledText>
@@ -107,30 +110,36 @@ const ParameterName = (props: ParameterNameProps): JSX.Element => {
   const [targetProps, tooltipProps] = useHoverTooltip()
 
   return (
-    <StyledTableCell isLast={isLast}>
-      <Flex gridGap={SPACING.spacing8}>
-        <StyledText as="p">{displayName}</StyledText>
-        {description != null ? (
-          <>
-            <Flex {...targetProps} alignItems={ALIGN_CENTER}>
-              <Icon
-                name="information"
-                size={SPACING.spacing12}
-                color={COLORS.grey60}
-                data-testid={`Icon_${index}`}
-              />
-            </Flex>
-            <Tooltip
-              {...tooltipProps}
-              backgroundColor={COLORS.black90}
-              width="8.75rem"
-              css={TYPOGRAPHY.labelRegular}
-            >
-              {description}
-            </Tooltip>
-          </>
-        ) : null}
-      </Flex>
+    <StyledTableCell display="span" isLast={isLast}>
+      <StyledText
+        as="p"
+        css={css`
+          display: ${DISPLAY_INLINE};
+          padding-right: ${SPACING.spacing8};
+        `}
+      >
+        {displayName}
+      </StyledText>
+      {description != null ? (
+        <>
+          <Flex display={DISPLAY_INLINE} {...targetProps}>
+            <Icon
+              name="information"
+              size={SPACING.spacing12}
+              color={COLORS.grey60}
+              data-testid={`Icon_${index}`}
+            />
+          </Flex>
+          <Tooltip
+            {...tooltipProps}
+            backgroundColor={COLORS.black90}
+            css={TYPOGRAPHY.labelRegular}
+            width="8.75rem"
+          >
+            {description}
+          </Tooltip>
+        </>
+      ) : null}
     </StyledTableCell>
   )
 }
@@ -143,7 +152,8 @@ const StyledTable = styled.table`
 
 const StyledTableHeader = styled.th`
   ${TYPOGRAPHY.labelSemiBold}
-  padding: ${SPACING.spacing8};
+  grid-gap: ${SPACING.spacing16};
+  padding-bottom: ${SPACING.spacing8};
   border-bottom: ${BORDERS.lineBorder};
 `
 
@@ -152,17 +162,21 @@ interface StyledTableRowProps {
 }
 
 const StyledTableRow = styled.tr<StyledTableRowProps>`
-  padding: ${SPACING.spacing8};
+  grid-gap: ${SPACING.spacing16};
   border-bottom: ${props => (props.isLast ? 'none' : BORDERS.lineBorder)};
 `
 
 interface StyledTableCellProps {
   isLast: boolean
+  paddingRight?: string
+  display?: string
 }
 
 const StyledTableCell = styled.td<StyledTableCellProps>`
   width: 33%;
-  padding-left: ${SPACING.spacing8};
+  display: ${props => (props.display != null ? props.display : 'table-cell')};
   padding-top: ${SPACING.spacing12};
   padding-bottom: ${props => (props.isLast ? 0 : SPACING.spacing12)};
+  padding-right: ${props =>
+    props.paddingRight != null ? props.paddingRight : SPACING.spacing16};
 `