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>
This commit is contained in:
Dusan Vojacek
2026-06-11 14:15:02 +02:00
parent ec13c2ad6e
commit 368291e562
2 changed files with 50 additions and 0 deletions

View File

@@ -0,0 +1,24 @@
# 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.