From 29092b23baa2dfc1bddab6b671e7babc4717b179 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Fri, 23 Feb 2024 17:36:11 +0000
Subject: [PATCH] Refactor GanttChart component to set timeline width
 dynamically

---
 CommonUI/src/Components/GanttChart/Bar/Index.tsx | 1 -
 CommonUI/src/Components/GanttChart/Index.tsx     | 5 ++++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/CommonUI/src/Components/GanttChart/Bar/Index.tsx b/CommonUI/src/Components/GanttChart/Bar/Index.tsx
index 3065d55946..f2f433356f 100644
--- a/CommonUI/src/Components/GanttChart/Bar/Index.tsx
+++ b/CommonUI/src/Components/GanttChart/Bar/Index.tsx
@@ -88,7 +88,6 @@ const Bar: FunctionComponent<ComponentProps> = (
             <div
                 className="chart-bar h-8 pt-1 pb-1 mt-2.5 mb-2.5 rounded absolute cursor-pointer ml-1 mr-1"
                 style={{
-                    marginLeft: `${barLeftPosition}px`,
                     width: `${barWidth}px`,
                     backgroundColor: `${props.bar.barColor.toString()}`,
                     opacity: barOpacity,
diff --git a/CommonUI/src/Components/GanttChart/Index.tsx b/CommonUI/src/Components/GanttChart/Index.tsx
index 9c0457bda2..f0a83fe57e 100644
--- a/CommonUI/src/Components/GanttChart/Index.tsx
+++ b/CommonUI/src/Components/GanttChart/Index.tsx
@@ -45,7 +45,10 @@ const GanttChart: FunctionComponent<ComponentProps> = (
             setEachIntervalWidth(chartWidth / numberOfInterval);
         }
 
-        setTimelineWidth(chartWidth * 0.75); // 75 % of chart width, 25% for category spacer
+
+        const timelineWidth: number = chartWidth * 0.75; // 75 % of chart width, 25% for category spacer
+
+        setTimelineWidth(timelineWidth); // 75 % of chart width, 25% for category spacer
     }, [chartWidth]);
 
     return (