Merge pull request #3322 from backstage/ryanv/fix-tooltip-text-overflow

fix(cost-insights-plugin): fix tooltip title for very long period separated titles

plugins/cost-insights/src/components/BarChart/BarChartTooltip.tsx

@@ -35,7 +35,6 @@ export const BarChartTooltip = ({
   children,
 }: PropsWithChildren<BarChartTooltipProps>) => {
   const classes = useStyles();
-
   return (
     <Box className={classes.tooltip} display="flex" flexDirection="column">
       <Box
@@ -47,14 +46,16 @@ export const BarChartTooltip = ({
         pt={2}
       >
         <Box display="flex" flexDirection="column">
-          <Typography variant="h6">{title}</Typography>
+          <Typography className={classes.truncate} variant="h6">
+            {title}
+          </Typography>
           {subtitle && (
             <Typography className={classes.subtitle} variant="subtitle1">
               {subtitle}
             </Typography>
           )}
         </Box>
-        {topRight}
+        {topRight && <Box ml={1}>{topRight}</Box>}
       </Box>
       {content && (
         <Box px={2} pt={2}>

plugins/cost-insights/src/utils/styles.ts

@@ -386,7 +386,7 @@ export const useTooltipStyles = makeStyles<CostInsightsTheme>(
         boxShadow: theme.shadows[1],
         color: theme.palette.tooltip.color,
         fontSize: theme.typography.fontSize,
-        width: 250,
+        maxWidth: 300,
       },
       actions: {
         padding: theme.spacing(2),
@@ -403,6 +403,12 @@ export const useTooltipStyles = makeStyles<CostInsightsTheme>(
       divider: {
         backgroundColor: emphasize(theme.palette.divider, 1),
       },
+      truncate: {
+        maxWidth: 200,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
       subtitle: {
         fontStyle: 'italic',
       },