From dfe9a88cebfd6e6d7debc24df9ffbed589bdc48b Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 2 Feb 2026 11:31:26 +0100
Subject: [PATCH] fix: Make expanded chart fill entire screen (vertical +
 horizontal)

- Updated ExpandableChartCard to use flex-1 + min-h-0 for proper height
- Added CSS selectors to make child divs fill available space
- Chart now expands to fullscreen in both dimensions
---
 components/DataGrid.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index 705e838..d9a99d8 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -202,7 +202,7 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
 
     if (isExpanded) {
         return (
-            <div className="fixed inset-0 z-[80] bg-slate-950 px-6 pb-6 pt-16 flex flex-col animate-fade-in overflow-hidden">
+            <div className="fixed inset-0 z-[80] bg-slate-950 p-6 flex flex-col animate-fade-in overflow-hidden">
                 <div className="flex justify-between items-center mb-4 border-b border-slate-800 pb-4 shrink-0">
                     <h3 className="text-xl font-bold text-slate-100 uppercase tracking-wide">{title}</h3>
                     <button
@@ -213,7 +213,8 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2.5} stroke="currentColor" className="w-5 h-5"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
                     </button>
                 </div>
-                <div className="flex-1 overflow-auto bg-slate-900 rounded-xl p-6 border border-border custom-scrollbar">
+                {/* Use flex-1 and min-h-0 to allow children to fill available space */}
+                <div className="flex-1 min-h-0 bg-slate-900 rounded-xl p-6 border border-border [&>div]:h-full [&>div]:w-full">
                     {children}
                 </div>
             </div>