ad4b52c9ce
- docs/refactor-clean-planner.md: plán Fází 0-4, stav, závazná pravidla (golden gate), návod nasazení v2 (shadow → vyhodnocení → přepnutí) - docs/planning-changelog.md: záznam 2026-06-11 (Fáze 0-3 kompletní) - docs/04-modules/planning.md: sekce Verze enginu v1/v2 + env flagy - docs/audits/*: stav implementace FE fixů - .claude/skills/ems-delta-triage: postup triáže neekonomického chování (realita vs plán vs shadow peer vs oracle, verdikt s Kč) - CLAUDE.md: ukazatele na refaktor, solver_v2 a delta-triage v 'Kde hledat co' Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2.3 KiB
2.3 KiB
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í
- Kritické: tailwind config + responsive výšky grafů, StatePanel mobile, viewport, Planning detail position.
- Vysoké: touch-aware tooltip (tap-to-pin) pro Chart.js i Recharts.
- Střední: grid breakpointy všude, ControlPanel, font scaling, touch targets.
Odhad: ~220–250 řádků změn napříč ~13 soubory.
Stav implementace (2026-06-11)
- ✅ Kritické + vysoké: responsive výšky grafů (tailwind chart-*), StatePanel mobile, PlanSlotDetail sticky řádek, tap-to-pin tooltip (Chart.js panel / Recharts trigger click, hook
useIsCoarsePointer), viewport-fit, touch targets, grid breakpointy — merge60f5f77+ fixb5dbc8c, build ověřen. - ⬜ Otestovat na reálném mobilu (tap-to-pin chování, scroll Planning tabulky).