From 851dc463948faee53b5385b563b8019e10f9a3bf Mon Sep 17 00:00:00 2001
From: syoul <syoul@librezo.fr>
Date: Tue, 24 Mar 2026 11:44:23 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20corriger=20layout=20desktop=20=E2=80=94?=
 =?UTF-8?q?=20StatsPanel=20w-72=20fixe,=20w-full=20dans=20drawer=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remplace w-full lg:w-72 h-full (qui cassait les écrans 640-1023px) par
un prop className : w-72 shrink-0 par défaut (desktop), w-full flex-1
min-h-0 dans le drawer mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.tsx                   | 2 +-
 src/components/StatsPanel.tsx | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2c8298a..b274c01 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -213,7 +213,7 @@ export default function App() {
             <div className="flex justify-center pt-2 pb-1 bg-[#0a0b0f] rounded-t-2xl border-t border-x border-[#2e2f3a] shrink-0">
               <div className="w-10 h-1 rounded-full bg-[#2e2f3a]" />
             </div>
-            <StatsPanel {...statsPanelProps} onClose={() => setPanelOpen(false)} />
+            <StatsPanel {...statsPanelProps} onClose={() => setPanelOpen(false)} className="w-full flex-1 min-h-0" />
           </div>
         </>
       )}
diff --git a/src/components/StatsPanel.tsx b/src/components/StatsPanel.tsx
index ce808fc..37d50fc 100644
--- a/src/components/StatsPanel.tsx
+++ b/src/components/StatsPanel.tsx
@@ -7,6 +7,7 @@ interface StatsPanelProps {
   loading: boolean;
   periodDays: number;
   source: 'live' | 'mock';
+  className?: string;
   currentUD: number;
   animationLabel?: string;
   viewMode?: 'heatmap' | 'flow';
@@ -59,7 +60,7 @@ function CityRow({ city, volume, count, countryCode, accent }: {
   );
 }
 
-export function StatsPanel({ stats, loading, periodDays, source, currentUD, animationLabel, viewMode = 'heatmap', flowStats, focusCity, onClose }: StatsPanelProps) {
+export function StatsPanel({ stats, loading, periodDays, source, currentUD, animationLabel, viewMode = 'heatmap', flowStats, focusCity, onClose, className }: StatsPanelProps) {
   const periodLabel = periodDays === 1 ? '24 dernières heures' : `${periodDays} derniers jours`;
   const prevStats = useRef<PeriodStats | null>(null);
 
@@ -83,7 +84,7 @@ export function StatsPanel({ stats, loading, periodDays, source, currentUD, anim
   if (stats && !loading) prevStats.current = stats;
 
   return (
-    <aside className="w-full lg:w-72 shrink-0 flex flex-col gap-4 bg-[#0a0b0f]/95 backdrop-blur-sm border-r border-[#1e1f2a] p-5 overflow-y-auto h-full">
+    <aside className={`flex flex-col gap-4 bg-[#0a0b0f]/95 backdrop-blur-sm border-r border-[#1e1f2a] p-5 overflow-y-auto ${className ?? 'w-72 shrink-0'}`}>
       {/* Header */}
       <div className="flex items-center gap-2.5">
         <div className="w-8 h-8 rounded-full bg-[#d4a843] flex items-center justify-center text-[#0a0b0f] font-bold text-sm shadow-[0_0_16px_rgba(212,168,67,0.5)]">