From 77757348f86e391e56911013931f2086aef3199a Mon Sep 17 00:00:00 2001
From: Jared Knowles <jared@civilytics.com>
Date: Mon, 10 Aug 2026 12:25:31 -0400
Subject: [PATCH] Switch ChartPanel from 3-column grid to single vertical stack

Charts and their titles/captions need more horizontal space for readability. Single column layout ensures each chart renders at full container width without cramped side-by-side placement.
---
 src/components/ChartPanel.jsx | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/ChartPanel.jsx b/src/components/ChartPanel.jsx
index dd437be..cf9fdc3 100644
--- a/src/components/ChartPanel.jsx
+++ b/src/components/ChartPanel.jsx
@@ -98,20 +98,13 @@ export default function ChartPanel({ district, state }) {
         </h2>
       </div>
 
-      {/* Responsive grid: 3 columns on desktop, 1 on mobile */}
+      {/* Single column layout: one chart per row with full-width cards */}
       <div style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        gap: 'var(--space-4)'
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-5)'
       }}>
         {/* Row 1 — Observed & descriptive */}
-        <ArrestsOverTime data={timeSeriesData} districtName={district.lea_name} />
-
-        <RateByGroupBar data={rateByGroup} />
-
-        <DistrictVsNational topGroup={topGroup} nationalRate={nationalTopRate} rateByGroup={rateByGroup} />
-
-        {/* Row 2 — Bayesian model distributions */}
         <ModelDrawsComparison data={chart4Data} waves={['15-16', '17-18', '21-22']} districtName={district.lea_name} />
 
         <ObservedRateDensity quadData={chart5Data} />