christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 16:35:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Make expanded chart fill entire screen (vertical + horizontal)

Browse Source 
- 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
This commit is contained in:
Christian Vidal Wolf
2026-02-02 11:31:26 +01:00
parent e1e6f127be
commit dfe9a88ceb
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DataGrid.tsx
+3 -2
View File
@@ -202,7 +202,7 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
if (isExpanded) { if (isExpanded) {
return ( 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"> <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> <h3 className="text-xl font-bold text-slate-100 uppercase tracking-wide">{title}</h3>
<button <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> <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> </button>
</div> </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} {children}
</div> </div>
</div> </div>