fix(app): increase size of robot version mismatch tooltip

[shlokamin]

Overview

closes RQA-2857

Changelog

• increase size of robot version mismatch tooltip

Review requests

• Go to "Recent Protocol Runs" table in robot details page
• Make sure robot and app are on mismatched versions of software OR trick the app by going to line 191 in app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx and replace isRobotOnWrongVersionOfSoftware with true
• Verify the tooltip text does not get cut off when hovering on "rerun protocol"

Risk assessment

Low

[ncdiehl11]

I think the issue here is that the Tooltip was inheriting whiteSpace='nowrap' from its parent. This is maybe a question for design, but we can either:

1. Keep maxWidth=FLEX_MAX_CONTENT
2. Give an explicit whiteSpace=WRAP prop to Tooltip to override parent style one-off on this component

<Tooltip tooltipProps={tooltipProps} whiteSpace={WRAP}>

3. default wrap behavior on app/src/atomsTooltip/index.tsx @ Tooltip

export function Tooltip(props: TooltipProps): JSX.Element {
  const {
    children,
    tooltipProps,
    width = FLEX_MAX_CONTENT,
    maxWidth = '8.75rem',
    whiteSpace = WRAP,
    ...styleProps
  } = props

  return (
    <SharedTooltip
      {...tooltipProps}
      backgroundColor={COLORS.black90}
      fontSize={TYPOGRAPHY.fontSizeCaption}
      width={width}
      maxWidth={maxWidth}
      whiteSpace={whiteSpace}
      {...styleProps}
    >
      {children}
    </SharedTooltip>
  )
}

[shlokamin]

good call — got rid of the white space and added a max-content with so each of the overflow items stretch horizontally to fit the container

[koji]

For whiteSpace, we would need to use normal.
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

[ncdiehl11]

Looks good!