From 777060420c616ebd6432502ebf5baec3d1fc968b Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Thu, 29 Jan 2026 19:41:32 +0000
Subject: [PATCH] feat: improve layout of Stats page

---
 frontend/src/pages/Stats.tsx | 70 ++++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/Stats.tsx b/frontend/src/pages/Stats.tsx
index cc4b0fd..b88c7da 100644
--- a/frontend/src/pages/Stats.tsx
+++ b/frontend/src/pages/Stats.tsx
@@ -55,36 +55,52 @@ const StatPage = () => {
 
   return (
     <div>
-      <h2>Posts per Day</h2>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "2fr 1fr",
+          gap: 24,
+          maxWidth: 1100,
+          margin: "0 auto",
+          width: "100%"
+        }}
+      >
+        <div>
+          <h2>Posts per Day</h2>
 
-      <ResponsiveContainer width={800} height={350}>
-        <LineChart data={postsPerDay}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="date" />
-          <YAxis />
-          <Tooltip />
-          <Line
-            type="monotone"
-            dataKey="posts_count"
-            name="Posts"
+          <ResponsiveContainer width={800} height={350}>
+            <LineChart data={postsPerDay}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="date" />
+              <YAxis />
+              <Tooltip />
+              <Line
+                type="monotone"
+                dataKey="posts_count"
+                name="Posts"
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+
+        <div>
+          <h2>Word Cloud</h2>
+          <ReactWordcloud 
+            words={wordFrequencyData}
+            options={{
+                    rotations: 2,
+                    rotationAngles: [0, 90],
+                    fontSizes: [14, 60],
+                    enableTooltip: true,
+                  }}
           />
-        </LineChart>
-      </ResponsiveContainer>
-
-      <h2>Word Cloud</h2>
-      <ReactWordcloud 
-        words={wordFrequencyData}
-        options={{
-                rotations: 2,
-                rotationAngles: [0, 90],
-                fontSizes: [14, 60],
-                enableTooltip: true,
-              }}
-      />
-
-      <h2>Heatmap</h2>
-      <ActivityHeatmap data={heatmapData} />
+        </div>
+      </div>
 
+      <div style={{ width: "100%", height: 320}}>
+        <h2>Heatmap</h2>
+        <ActivityHeatmap data={heatmapData} />
+      </div>
     </div>
   );
 }