responsivita: výšky grafů přes tailwind chart-*, viewport-fit=cover

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/PriceChart.tsx

@@ -81,11 +81,13 @@ export function PriceChart({ siteId, pollMs = 120_000 }: Props) {
   }, [load, pollMs])
 
   if (!ready || points.length === 0) {
-    return <div className="h-[280px] w-full animate-pulse rounded-xl border border-slate-800 bg-slate-900/40" />
+    return (
+      <div className="h-chart-sm w-full animate-pulse rounded-xl border border-slate-800 bg-slate-900/40 sm:h-chart-md lg:h-chart-xl" />
+    )
   }
 
   return (
-    <div className="h-[280px] w-full rounded-xl border border-slate-800 bg-slate-900/40 p-2 pt-4">
+    <div className="h-chart-sm w-full rounded-xl border border-slate-800 bg-slate-900/40 p-2 pt-4 sm:h-chart-md lg:h-chart-xl">
       <ResponsiveContainer width="100%" height="100%">
         <LineChart data={points} margin={{ top: 8, right: 12, left: 0, bottom: 0 }}>
           <CartesianGrid strokeDasharray="3 3" stroke="#334155" opacity={0.6} />

frontend/src/components/charts/EconomicsChart.tsx

@@ -107,7 +107,9 @@ export function EconomicsChart({ points, hasGreenBonus }: Props) {
   }))
 
   return (
-    <ResponsiveContainer width="100%" height={380}>
+    // Výška přes CSS breakpointy (mobil 200 px, desktop 280 px) — žádné window.innerWidth v render.
+    <div className="h-chart-md w-full lg:h-chart-xl">
+      <ResponsiveContainer width="100%" height="100%">
       <ComposedChart data={data} margin={{ top: 8, right: 16, bottom: 4, left: 0 }}>
         <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
         <XAxis dataKey="label" tick={{ fontSize: 11, fill: '#94a3b8' }} />
@@ -215,7 +217,8 @@ export function EconomicsChart({ points, hasGreenBonus }: Props) {
           strokeDasharray="5 3"
           dot={false}
         />
-      </ComposedChart>
-    </ResponsiveContainer>
+        </ComposedChart>
+      </ResponsiveContainer>
+    </div>
   )
 }

frontend/src/components/charts/EnergyChart.tsx

@@ -326,8 +326,13 @@ export function EnergyChart({ slots, nowIndex, hidden, onToggle, onChartArea }:
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="h-[260px] w-full">
-        <canvas ref={canvasRef} className="max-h-[260px] w-full" role="img" aria-label="Graf výkonů a cen" />
+      <div className="h-chart-sm w-full sm:h-chart-md lg:h-chart-lg">
+        <canvas
+          ref={canvasRef}
+          className="max-h-chart-sm w-full sm:max-h-chart-md lg:max-h-chart-lg"
+          role="img"
+          aria-label="Graf výkonů a cen"
+        />
       </div>
       <div className="flex flex-wrap gap-x-3 gap-y-1.5 px-1">
         {ENERGY_LEGEND.map((item) => {

frontend/src/components/charts/SocTuvChart.tsx

@@ -235,8 +235,8 @@ export function SocTuvChart({ slots, nowIndex, liveBatSoc = null }: Props) {
   }, [labels, series, slots, slots.length])
 
   return (
-    <div className="h-[100px] w-full">
-      <canvas ref={canvasRef} className="max-h-[100px] w-full" role="img" aria-label="SoC a TUV" />
+    <div className="h-[80px] w-full sm:h-[100px]">
+      <canvas ref={canvasRef} className="max-h-[80px] w-full sm:max-h-[100px]" role="img" aria-label="SoC a TUV" />
     </div>
   )
 }