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:
Claude Agent
2026-08-30 14:05:44 +00:00
parent 22628fb178
commit 6b6f6644f9
3 changed files with 134 additions and 9 deletions

View File

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