fix(discord-bridge): dashboard-ul e responsive pe telefon
Pe un ecran de 390px pagina se intindea pe 2621px si derula orizontal. Cauza: copiii de grid au min-width:auto, deci liniile lungi din pre.log si tabelul de fire dilatau coloana lui .wrap, si odata cu ea tot documentul. Rezolvat cu min-width:0 explicit; derularea ramane inauntrul containerelor cu overflow. Sub 640px: - tabelul de fire devine carduri stivuite (capul de tabel dispare, eticheta vine din data-label) — 5 coloane pe 390px insemnau derulare la fiecare rand; - butoanele stau doua pe rand, cu tinta de atins de 44px; sub 380px, unul pe rand; - verificarile si confirmarile se aseaza pe verticala, comenzile lungi se rup; - antetul trece pe doua randuri, notificarile se intind pe toata latimea; - corpul trece la 16px, ca iOS sa nu mai dea zoom la focus pe input. Verificat la 360, 390 si 1440px: zero depasiri pe orizontala, butoanele de confirmare egale si de 44px inaltime, desktopul neschimbat. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01B29CApsP1JkSdjYaGaHpE7
This commit is contained in:
@@ -23,6 +23,23 @@ http://127.0.0.1:18790 <- local / prin tunel SSH
|
||||
|
||||
Starea se reimprospateaza automat la 5 secunde.
|
||||
|
||||
## Pe telefon
|
||||
|
||||
Panoul e gandit sa fie folosit de pe telefon (de acolo vine si comanda in Discord),
|
||||
deci sub 640px se schimba trei lucruri:
|
||||
|
||||
- **tabelul de fire devine carduri stivuite** — capul de tabel dispare, iar eticheta
|
||||
fiecarei celule vine din `data-label`; un tabel de 5 coloane pe 390px ar fi insemnat
|
||||
derulare orizontala la fiecare rand;
|
||||
- **butoanele stau doua pe rand, cu tinta de atins de 44px** (sub 380px, unul pe rand);
|
||||
- **verificarile si confirmarile se aseaza pe verticala**, iar comenzile lungi se rup
|
||||
in loc sa impinga pagina.
|
||||
|
||||
Nimic nu iese din viewport pe orizontala: jurnalul si tabelele deruleaza in propriul
|
||||
container. Capcana care rupsese pagina (2621px latime pe un ecran de 390px) era
|
||||
`min-width: auto` pe copiii de grid — liniile lungi din `pre.log` dilatau coloana, si
|
||||
odata cu ea toata pagina; de aceea exista `min-width: 0` explicit in `static/app.css`.
|
||||
|
||||
## Decizii de proiectare
|
||||
|
||||
**O singura unitate controlata.** `/api/service` actioneaza intotdeauna pe
|
||||
|
||||
Reference in New Issue
Block a user