From 36d56ec0fb71c0965f335c4e67ed00e12387a127 Mon Sep 17 00:00:00 2001
From: Oliver Dudgeon <22367286+OliverDudgeon@users.noreply.github.com>
Date: Mon, 11 Mar 2024 22:05:56 +0000
Subject: [PATCH] fix(project-stats): fix text wrap and spacing of chart
 tooltip

---
 features/ProjectStats/UsageChart.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/features/ProjectStats/UsageChart.tsx b/features/ProjectStats/UsageChart.tsx
index 6c0448297..173508030 100644
--- 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>