From 82f08c0c1e5ff940e6bd25a30d3304f5993acb3d Mon Sep 17 00:00:00 2001
From: Christophe Vila <kriss@vilanet.fr>
Date: Sun, 19 Jul 2026 16:41:30 +0200
Subject: [PATCH] Stack Pace/HR charts vertically at double height instead of
 side by side

Each chart now takes the full card width and 200px height (was 100px,
half-width side by side), making the phase bands, target range, and
per-second trace much easier to read.
---
 frontend/src/App.css                                     | 5 ++---
 frontend/src/components/charts/ExpectedVsActualChart.tsx | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 690f557..4f88311 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -228,14 +228,13 @@ button:disabled {
 
 .expected-actual-charts {
   display: flex;
+  flex-direction: column;
   gap: 1rem;
-  flex-wrap: wrap;
   margin: 0.5rem 0;
 }
 
 .mini-chart {
-  flex: 1 1 220px;
-  min-width: 180px;
+  width: 100%;
 }
 
 .mini-chart-label {
diff --git a/frontend/src/components/charts/ExpectedVsActualChart.tsx b/frontend/src/components/charts/ExpectedVsActualChart.tsx
index d1381e4..d962cc4 100644
--- a/frontend/src/components/charts/ExpectedVsActualChart.tsx
+++ b/frontend/src/components/charts/ExpectedVsActualChart.tsx
@@ -67,7 +67,7 @@ function robustDomain(actualValues: Array<number | null | undefined>, targetValu
 // Picks a small number of evenly-spaced ticks across the domain, each
 // snapped to a round increment (30s for pace, 5-20bpm for HR depending on
 // range). A fixed, small count -- rather than every increment in range --
-// keeps labels legible and non-overlapping in a ~100px-tall mini chart.
+// keeps labels legible and non-overlapping in a ~200px-tall mini chart.
 // Recharts' own collision-avoidance would otherwise silently drop most of a
 // denser tick set anyway.
 function niceTicks([lo, hi]: [number, number], step: number, count = 3): number[] {
@@ -304,7 +304,7 @@ export function ExpectedVsActualChart({ laps, samples }: { laps: Lap[]; samples:
       )}
       <div className="mini-chart">
         <span className="mini-chart-label">Pace{hasPaceTarget ? " vs target" : ""}</span>
-        <ResponsiveContainer width="100%" height={100}>
+        <ResponsiveContainer width="100%" height={200}>
           <AreaChart data={points} margin={{ top: 4, right: 4, bottom: 0, left: 4 }}>
             {phaseBands.map((b, i) => (
               <ReferenceArea key={i} x1={b.x1} x2={b.x2} fill={b.color} fillOpacity={0.18} strokeOpacity={0} />
@@ -325,7 +325,7 @@ export function ExpectedVsActualChart({ laps, samples }: { laps: Lap[]; samples:
       </div>
       <div className="mini-chart">
         <span className="mini-chart-label">HR{hasHRTarget ? " vs target" : ""}</span>
-        <ResponsiveContainer width="100%" height={100}>
+        <ResponsiveContainer width="100%" height={200}>
           <AreaChart data={points} margin={{ top: 4, right: 4, bottom: 0, left: 4 }}>
             {phaseBands.map((b, i) => (
               <ReferenceArea key={i} x1={b.x1} x2={b.x2} fill={b.color} fillOpacity={0.18} strokeOpacity={0} />