From 255cf0a4e06f605243cb7a8936bb9aac4114ab17 Mon Sep 17 00:00:00 2001
From: Yohh <durandyohan@zaclys.net>
Date: Thu, 5 Dec 2024 11:49:58 +0100
Subject: [PATCH] front: fix speedspacechart-resize-behavior

Signed-off-by: Yohh <durandyohan@zaclys.net>
---
 .../SpeedSpaceChartContainer.tsx              | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/front/src/modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChartContainer.tsx b/front/src/modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChartContainer.tsx
index 04dee942276..eb47c79e9b5 100644
--- a/front/src/modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChartContainer.tsx
+++ b/front/src/modules/simulationResult/components/SpeedSpaceChart/SpeedSpaceChartContainer.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { SpeedSpaceChart } from '@osrd-project/ui-speedspacechart';
 import type {
@@ -45,7 +45,8 @@ const SpeedSpaceChartContainer = ({
   const [baseHeightOfSpeedSpaceChart, setBaseHeightOfSpeedSpaceChart] =
     useState(heightOfSpeedSpaceChart);
 
-  const containerWidth = document.getElementById('container-SpeedSpaceChart')?.clientWidth;
+  const root = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(root.current?.clientWidth || 0);
 
   const speedSpaceChartData = formatData(
     trainSimulation,
@@ -75,6 +76,25 @@ const SpeedSpaceChartContainer = ({
     },
   };
 
+  useEffect(() => {
+    const updateCanvasSize = () => {
+      if (root.current) {
+        setContainerWidth(root.current.clientWidth);
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(updateCanvasSize);
+    if (root.current) {
+      resizeObserver.observe(root.current);
+    }
+
+    return () => {
+      if (root.current) {
+        resizeObserver.unobserve(root.current);
+      }
+    };
+  }, []);
+
   return (
     <Rnd
       default={{
@@ -105,6 +125,7 @@ const SpeedSpaceChartContainer = ({
       }}
     >
       <div
+        ref={root}
         id="container-SpeedSpaceChart"
         className="chart"
         style={{ height: `${heightOfSpeedSpaceChartContainer}px` }}