syoul/g1flux
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: corriger layout desktop — StatsPanel w-72 fixe, w-full dans drawer mobile
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source 
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>
This commit is contained in:
syoul
2026-03-24 11:44:23 +01:00
parent 786bf30a7b
commit 851dc46394
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+1 -1
View File
@@ -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="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 className="w-10 h-1 rounded-full bg-[#2e2f3a]" />
</div> </div>
<StatsPanel {...statsPanelProps} onClose={() => setPanelOpen(false)} /> <StatsPanel {...statsPanelProps} onClose={() => setPanelOpen(false)} className="w-full flex-1 min-h-0" />
</div> </div>
</> </>
)} )}
src/components/StatsPanel.tsx
+3 -2
View File
@@ -7,6 +7,7 @@ interface StatsPanelProps {
loading: boolean; loading: boolean;
periodDays: number; periodDays: number;
source: 'live' | 'mock'; source: 'live' | 'mock';
className?: string;
currentUD: number; currentUD: number;
animationLabel?: string; animationLabel?: string;
viewMode?: 'heatmap' | 'flow'; 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 periodLabel = periodDays === 1 ? '24 dernières heures' : `${periodDays} derniers jours`;
const prevStats = useRef<PeriodStats | null>(null); 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; if (stats && !loading) prevStats.current = stats;
return ( 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 */} {/* Header */}
<div className="flex items-center gap-2.5"> <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)]"> <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)]">