fix(popup): Fix resizing of popup and chart taxon abundance

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,
 };

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,20 +48,47 @@ 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}
       title={t("indicators.common.abundance", { ns: "all4trees" })}
     >
       <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

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}`}
             >