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

@@ -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)',
           }}

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 {

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 />

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>

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>