style: make charts page fit in viewport

Reduce chart heights, padding, and gaps to fit 2x2 grid in single
viewport without scrolling.

Author: nolancacheux

src/app/analysis/[id]/charts/page.tsx

@@ -19,18 +19,18 @@ export default function ChartsPage() {
 
   if (isLoading) {
     return (
-      <div className="grid grid-cols-2 gap-6">
-        <Skeleton className="h-80" />
-        <Skeleton className="h-80" />
-        <Skeleton className="h-80" />
-        <Skeleton className="h-80" />
+      <div className="grid grid-cols-2 gap-3">
+        <Skeleton className="h-52" />
+        <Skeleton className="h-52" />
+        <Skeleton className="h-52" />
+        <Skeleton className="h-52" />
       </div>
     );
   }
 
   if (error || !analysis) {
     return (
-      <div className="flex items-center justify-center h-96">
+      <div className="flex items-center justify-center h-64">
         <div className="text-center">
           <h2 className="text-lg font-semibold text-[#1E3A5F] mb-2">
             Charts Unavailable
@@ -47,25 +47,25 @@ export default function ChartsPage() {
     {
       title: "Sentiment Distribution",
       description:
-        "How comments are distributed across sentiment categories. A balanced positive-to-negative ratio indicates healthy audience engagement.",
+        "Comment distribution across sentiment categories.",
       chart: <SentimentPie sentiment={analysis.sentiment} />,
     },
     {
       title: "Engagement by Category",
       description:
-        "Total likes received by each sentiment type. High engagement on positive comments suggests strong content resonance.",
+        "Total likes by sentiment type.",
       chart: <EngagementBar sentiment={analysis.sentiment} />,
     },
     {
       title: "Topic Overview",
       description:
-        "Visual representation of detected topics sized by mention frequency. Larger bubbles indicate more frequently discussed themes.",
+        "Topics sized by mention frequency.",
       chart: <TopicBubble topics={analysis.topics} />,
     },
     {
       title: "ML Confidence",
       description:
-        "Distribution of model confidence scores. Higher concentration toward 1.0 indicates more reliable classifications.",
+        "Model confidence score distribution.",
       chart: (
         <ConfidenceHistogram
           avgConfidence={analysis.ml_metadata?.avg_confidence || 0.85}
@@ -76,27 +76,27 @@ export default function ChartsPage() {
   ];
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-3">
       <div className="reveal stagger-1">
-        <h2 className="text-xl font-display font-semibold text-[#1E3A5F] mb-2">
+        <h2 className="text-lg font-display font-semibold text-[#1E3A5F]">
           Analysis Charts
         </h2>
-        <p className="text-[#6B7280]">
-          Visual breakdown of sentiment distribution, engagement, and ML metrics.
+        <p className="text-xs text-[#6B7280]">
+          Visual breakdown of sentiment, engagement, and ML metrics.
         </p>
       </div>
 
-      <div className="grid grid-cols-2 gap-6">
+      <div className="grid grid-cols-2 gap-3">
         {chartPanels.map((panel, index) => (
           <div
             key={panel.title}
-            className={`rounded-xl border border-[#E8E4DC] bg-white p-6 shadow-sm reveal stagger-${index + 2}`}
+            className={`rounded-lg border border-[#E8E4DC] bg-white p-3 shadow-sm reveal stagger-${index + 2}`}
           >
-            <h3 className="text-lg font-semibold text-[#1E3A5F] mb-2">
+            <h3 className="text-sm font-semibold text-[#1E3A5F] mb-1">
               {panel.title}
             </h3>
-            <div className="h-64 mb-4">{panel.chart}</div>
-            <p className="text-sm text-[#6B7280] leading-relaxed">
+            <div className="h-40">{panel.chart}</div>
+            <p className="mt-1 text-[10px] text-[#6B7280] leading-tight">
               {panel.description}
             </p>
           </div>