Files
ems/docs/audits/frontend-responsive-2026-06-11.md
Dusan Vojacek 368291e562 Audity frontendu: výkon + responsivita (2026-06-11)
Výkon: dominují DB read-modely — fn_plan_current_bundle 3.8 s,
fn_site_full_status 1.7 s (měřeno na živé DB); dále payloady, polling,
chybějící virtualizace Planning tabulky, bundle 1.2 MB bez chunking.
Responsivita: pevné výšky grafů, tooltip × StatePanel/tabulka kolize na touch,
StatePanel grid, breakpointy. Plné detaily a fixy v docs/audits/.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-11 14:15:02 +02:00

1.9 KiB
Raw Blame History

Audit responsivity frontendu (2026-06-11)

Hlášené problémy: grafy na mobilu špatně zobrazené; tooltip při dotyku koliduje s detailní tabulkou.

Inventura problémů

Problém Kde Fix
Pevné výšky grafů (260/380/280/100 px) na všech zařízeních EnergyChart.tsx:329, EconomicsChart.tsx:110, PriceChart.tsx:84, SocTuvChart.tsx:238 responsive výšky (140/200/260 dle breakpointu), aspect-ratio
Tooltip × StatePanel kolize (Chart.js tooltip absolutně pozicovaný, na touch zůstává) Dashboard.tsx:323-354 touch-aware tooltip: na touch tap-to-pin do vyhrazeného panelu NAD grafem, ne overlay; ESC/tap-out zavření
Planning detail řádku koliduje při scrollu Planning.tsx:1016-1170 (PlanSlotDetail) kontejner position:relative, detail jako řádek tabulky (ne absolutní), na mobilu modal/bottom-sheet
StatePanel grid [52px_1fr] na <380 px StatePanel.tsx:446 label nad track na mobilu (md:grid-cols-[52px_1fr])
Metric karty breakpointy (úzké na tabletu) Dashboard.tsx:193, Economics.tsx:250, EnergyFlows.tsx:199 doplnit md: stupeň
ControlPanel tabulka maxHeight 400px ControlPanel.tsx:181-227 responsive výška
Touch targets < 44 px, drobné fonty 10-11 px globálně CSS min-height 44px na interactive, media font scaling
tailwind.config bez custom breakpointů/výšek tailwind.config.ts chart-sm/md/lg výšky
viewport bez viewport-fit=cover index.html doplnit

Doporučené pořadí

  1. Kritické: tailwind config + responsive výšky grafů, StatePanel mobile, viewport, Planning detail position.
  2. Vysoké: touch-aware tooltip (tap-to-pin) pro Chart.js i Recharts.
  3. Střední: grid breakpointy všude, ControlPanel, font scaling, touch targets.

Odhad: ~220250 řádků změn napříč ~13 soubory.