mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 18:25:24 +02:00
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
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user