fix(project-stats): fix text wrap and spacing of chart tooltip

InformaticsMatters · Mar 11, 2024 · 36d56ec · 36d56ec
1 parent 96dbf9e
commit 36d56ec
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/features/ProjectStats/UsageChart.tsx b/features/ProjectStats/UsageChart.tsx
@@ -46,11 +46,12 @@ export const UsageChart = ({ chartData, unitCost }: UsageChartProps) => {
           columnGap={4}
           display="grid"
           gridTemplateColumns="repeat(5, auto)"
-          rowGap={4}
+          rowGap={1}
         >
           {chartData.map((item) => {
             return (
               <Fragment key={item.type}>
+                {/* Colour icon box */}
                 <Box
                   bgcolor={item.color}
                   border={1}
@@ -68,7 +69,7 @@ export const UsageChart = ({ chartData, unitCost }: UsageChartProps) => {
                 <Typography component="span" variant="body2">
                   /
                 </Typography>
-                <Typography component="span" sx={{ justifySelf: "end" }} variant="body2">
+                <Typography noWrap component="span" sx={{ justifySelf: "end" }} variant="body2">
                   {((item.value / valuesSummed) * 100).toFixed(2)} %
                 </Typography>
               </Fragment>