From 5d2ffd9163fd1f62942b49382247404d71ea0a65 Mon Sep 17 00:00:00 2001
From: Celes Renata <celes@frameshift.net>
Date: Thu, 30 Apr 2026 23:31:55 +0000
Subject: [PATCH] fix: vertical market markers need yAxisId + move legend below
 date labels

- Add yAxisId='left' to vertical ReferenceLine (required by Recharts)
- Increase bottom margin from 40 to 70 for date label + legend space
- Legend uses verticalAlign='bottom' with 24px top padding
---
 frontend/src/pages/CompanyDetail.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/CompanyDetail.tsx b/frontend/src/pages/CompanyDetail.tsx
index fa97ed3..f5e03fd 100644
--- a/frontend/src/pages/CompanyDetail.tsx
+++ b/frontend/src/pages/CompanyDetail.tsx
@@ -802,11 +802,12 @@ function TrendHistoryChart({ trends, latestTrends, ticker, marketPrices, range90
   // Shared chart content — rendered at different sizes
   const chartContent = (height: number) => (
     <ResponsiveContainer width="100%" height={height}>
-      <LineChart data={chartData} margin={{ top: 5, right: 20, bottom: 40, left: 0 }}>
+      <LineChart data={chartData} margin={{ top: 5, right: 20, bottom: 70, left: 0 }}>
         <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
         {marketMarkers.map((m, i) => (
           <ReferenceLine
             key={`market-${i}`}
+            yAxisId="left"
             x={m.ts}
             stroke={m.label === 'Open' ? '#22c55e' : '#ef4444'}
             strokeDasharray="4 4"
@@ -845,7 +846,7 @@ function TrendHistoryChart({ trends, latestTrends, ticker, marketPrices, range90
           />
         )}
         <Tooltip content={TrendTooltip} />
-        <Legend wrapperStyle={{ color: '#94a3b8', fontSize: 12 }} />
+        <Legend verticalAlign="bottom" wrapperStyle={{ color: '#94a3b8', fontSize: 12, paddingTop: 24 }} />
         {hasPrice && range90d.high != null && (
           <ReferenceLine
             yAxisId="right"