From 8d8049434e2623224388a80f0105ead7c8b9a9b3 Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 17:05:54 +0200
Subject: [PATCH] fix(savings_goals): projection chart redraws when container
 resizes (Turbo navigation)

After submitting a new contribution, Turbo's redirect-replace stream
swaps the page; the chart's data-controller reconnects but the
container's clientWidth can momentarily be 0 (parent grid hasn't laid
out yet). The early-bail in _draw left the SVG empty and nothing
triggered another draw, so the chart stayed blank.

Add a ResizeObserver to the controller. The observer fires once the
container settles into a real size and re-runs _draw, which now paints
the chart correctly after the post-submit navigation.
---
 .../savings_goal_projection_chart_controller.js           | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/javascript/controllers/savings_goal_projection_chart_controller.js b/app/javascript/controllers/savings_goal_projection_chart_controller.js
index e2084bcbd..9a1379daa 100644
--- a/app/javascript/controllers/savings_goal_projection_chart_controller.js
+++ b/app/javascript/controllers/savings_goal_projection_chart_controller.js
@@ -17,10 +17,18 @@ export default class extends Controller {
     this._draw();
     this._resize = this._draw.bind(this);
     window.addEventListener("resize", this._resize);
+    // Container may have 0 width on initial connect (Turbo restoration,
+    // hidden parent, etc). Re-draw whenever the box settles into a real
+    // size.
+    if (typeof ResizeObserver !== "undefined") {
+      this._observer = new ResizeObserver(() => this._draw());
+      this._observer.observe(this.element);
+    }
   }
 
   disconnect() {
     window.removeEventListener("resize", this._resize);
+    this._observer?.disconnect();
   }
 
   _draw() {