From 41bcb5e64095ac52c5a7e6c44d302dd467a4224d Mon Sep 17 00:00:00 2001
From: David Bretaud <david.bretaud.dev@gmail.com>
Date: Wed, 1 Jul 2026 23:29:58 +0200
Subject: [PATCH 1/2] fix(popup): Trick graph to not account for popup size

---
 .../features/indicators/components/indicator-section.tsx  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/webapp/src/features/indicators/components/indicator-section.tsx b/webapp/src/features/indicators/components/indicator-section.tsx
index dc0320b9..45219304 100644
--- a/webapp/src/features/indicators/components/indicator-section.tsx
+++ b/webapp/src/features/indicators/components/indicator-section.tsx
@@ -63,8 +63,14 @@ export const IndicatorSection: FC<IndicatorSectionProps> = ({
       {chartIndicators.length > 0 && (
         <div className="flex flex-col w-full gap-sm">
           {chartIndicators.map((child, index) => (
+            // `w-0 min-w-full` makes each chart fill the available width without
+            // contributing to the popup's intrinsic (max-content) width. Charts
+            // are `w-full` and would otherwise pin the shrink-to-fit popup to
+            // their widest rendered size, so it could never shrink back after
+            // being maximized. This keeps the popup width driven by its textual
+            // content only, so toggling the size returns to the fit-content width.
             <div
-              className="w-full"
+              className="w-0 min-w-full"
               // biome-ignore lint/suspicious/noArrayIndexKey: <don't want to enforce id>
               key={`chart-indicator-${index}`}
             >

From 0b5e5cc06772f071ddb24c51f6da43741e5eb070 Mon Sep 17 00:00:00 2001
From: David Bretaud <david.bretaud.dev@gmail.com>
Date: Wed, 1 Jul 2026 23:45:56 +0200
Subject: [PATCH 2/2] fix(chart-taxon-abundance): Resize Plot when resizing
 popup

---
 webapp/src/features/charts/soil/config.ts     |  5 ++-
 .../charts/soil/ui/chart-taxon-abundance.tsx  | 44 ++++++++++++++++---
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/webapp/src/features/charts/soil/config.ts b/webapp/src/features/charts/soil/config.ts
index b2f3672a..573d4034 100644
--- a/webapp/src/features/charts/soil/config.ts
+++ b/webapp/src/features/charts/soil/config.ts
@@ -1,7 +1,8 @@
 export const SUNBURST_LAYOUT = {
-  height: 360,
+  // Let Plotly fill its container (see chart-taxon-abundance) instead of a
+  // fixed width/height, so the chart expands with the popup like the base charts.
+  autosize: true,
   margin: { b: 20, l: 20, r: 20, t: 20 },
   paper_bgcolor: "rgba(0,0,0,0)",
   plot_bgcolor: "rgba(0,0,0,0)",
-  width: 360,
 };
diff --git a/webapp/src/features/charts/soil/ui/chart-taxon-abundance.tsx b/webapp/src/features/charts/soil/ui/chart-taxon-abundance.tsx
index 091e0daa..5442ca62 100644
--- a/webapp/src/features/charts/soil/ui/chart-taxon-abundance.tsx
+++ b/webapp/src/features/charts/soil/ui/chart-taxon-abundance.tsx
@@ -1,4 +1,5 @@
 import type { Data as PlotlyData } from "plotly.js";
+import { useEffect, useRef } from "react";
 import Plot from "react-plotly.js";
 
 import {
@@ -18,10 +19,12 @@ export const ChartTaxonAbundance: ChartComponentType<PieChartProps> = ({
   dataType,
 }) => {
   const { t } = useTranslation(["common", "all4trees"]);
+
   const dataEntries = Object.entries(data);
   const hasTaxonData = dataEntries.some(([key]) => key.trim() !== "");
   let sunburstData: PlotlyData[] = [];
   const cardHeight = hasTaxonData ? "min-h-105" : "min-h-40";
+
   if (hasTaxonData) {
     // Remove taxon entries with "Aucun" value
     const filteredDataEntries = dataEntries.filter(
@@ -45,6 +48,25 @@ export const ChartTaxonAbundance: ChartComponentType<PieChartProps> = ({
       } as SunburstTrace,
     ] as unknown as PlotlyData[];
   }
+
+  // Plotly (via react-plotly's `useResizeHandler`) only refits on window
+  // resize, so it misses container-only changes such as toggling the popup
+  // size. Observe the wrapper and forward those changes as a resize event so
+  // the sunburst adapts like the recharts base charts.
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!hasTaxonData) return;
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    // Use react-plotly's own resize handler (which refits to the container)
+    const observer = new ResizeObserver(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+    observer.observe(wrapper);
+    return () => observer.disconnect();
+  }, [hasTaxonData]);
+
   return (
     <ChartComponent
       className={cardHeight}
@@ -52,13 +74,21 @@ export const ChartTaxonAbundance: ChartComponentType<PieChartProps> = ({
     >
       <div className="flex items-center justify-center">
         {hasTaxonData && (
-          <Plot
-            className="pl-15  "
-            config={{ displayModeBar: false, responsive: true }}
-            data={sunburstData}
-            layout={SUNBURST_LAYOUT}
-            style={{ height: "100%", width: "100%" }}
-          />
+          // Style - Extend the width to the container, keep a square aspect and
+          // stay centered. Limit width to 600px to avoid an oversized chart.
+          <div
+            className="mx-auto aspect-square h-auto max-h-full w-full max-w-150"
+            ref={wrapperRef}
+          >
+            <Plot
+              className="h-full w-full"
+              config={{ displayModeBar: false, responsive: true }}
+              data={sunburstData}
+              layout={SUNBURST_LAYOUT}
+              style={{ height: "100%", width: "100%" }}
+              useResizeHandler
+            />
+          </div>
         )}
         {!hasTaxonData && (
           <div