From f2901ef366c62caec9b3b6d8ebeb8ecf4a16bbac Mon Sep 17 00:00:00 2001
From: Dusan Vojacek <dusan.vojacek@direct.cz>
Date: Thu, 11 Jun 2026 14:28:49 +0200
Subject: [PATCH] responsivita: grid breakpointy karet, ControlPanel max-h
 50vh, touch targets a reduced-motion CSS

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/ControlPanel.tsx |  4 +--
 frontend/src/index.css                   | 31 ++++++++++++++++++++++++
 frontend/src/pages/Dashboard.tsx         |  2 +-
 frontend/src/pages/Economics.tsx         |  2 +-
 frontend/src/pages/EnergyFlows.tsx       |  2 +-
 5 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ControlPanel.tsx b/frontend/src/components/ControlPanel.tsx
index f5b8121..ca3b0c5 100644
--- a/frontend/src/components/ControlPanel.tsx
+++ b/frontend/src/components/ControlPanel.tsx
@@ -170,10 +170,8 @@ const JournalSection = memo(
       <div className="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
         <h3 className="mb-3 text-sm font-semibold text-slate-200">Posledních 50 zápisů</h3>
         <div
-          className="overflow-x-auto"
+          className="max-h-[50vh] overflow-x-auto overflow-y-auto md:max-h-[400px]"
           style={{
-            maxHeight: '400px',
-            overflowY: 'auto',
             borderRadius: 'var(--border-radius-md)',
             border: '0.5px solid var(--color-border-tertiary)',
           }}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9b29e3a..9827380 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -10,6 +10,37 @@
   body {
     @apply min-h-screen bg-slate-950 text-slate-100 antialiased;
   }
+
+  /* Interaktivní prvky: bez double-tap zoom zpoždění na touch zařízeních. */
+  button,
+  a,
+  select,
+  input,
+  textarea,
+  [role='button'] {
+    touch-action: manipulation;
+  }
+
+  /* Touch targets: na zařízeních bez přesného kurzoru min. 44 px na výšku. */
+  @media (pointer: coarse) {
+    button,
+    select,
+    [role='button']:not(tr) {
+      min-height: 44px;
+    }
+  }
+
+  /* Omezené animace dle systémové preference. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
 }
 
 @keyframes critical-pulse {
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index b213201..e8e78b0 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -190,7 +190,7 @@ export function Dashboard() {
         ) : null}
 
         <section>
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-6">
             {metricsLoading ? (
               <>
                 <MetricSkeleton />
diff --git a/frontend/src/pages/Economics.tsx b/frontend/src/pages/Economics.tsx
index 0abb8a3..9cce80e 100644
--- a/frontend/src/pages/Economics.tsx
+++ b/frontend/src/pages/Economics.tsx
@@ -282,7 +282,7 @@ export default function Economics() {
 
       {/* Summary cards */}
       {summary && (
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-3 xl:grid-cols-6">
           <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
             <p className="text-xs text-slate-400">Nákup ze sítě</p>
             <p className="mt-1 text-lg font-semibold text-red-400">{summary.grid_import_cashflow.toFixed(2)} Kč</p>
diff --git a/frontend/src/pages/EnergyFlows.tsx b/frontend/src/pages/EnergyFlows.tsx
index 22ed0af..02e064d 100644
--- a/frontend/src/pages/EnergyFlows.tsx
+++ b/frontend/src/pages/EnergyFlows.tsx
@@ -267,7 +267,7 @@ export default function EnergyFlows() {
           )}
 
           {totals && (
-            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
+            <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
               <div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
                 <p className="text-xs font-medium uppercase tracking-wide text-amber-400">Perspektiva FVE</p>
                 <p className="mt-2 text-2xl font-semibold text-white">{totals.pv_production_kwh.toFixed(1)} kWh</p>