# PRD 5.13 — Responsive compact (mobil/tableta) + sistem de butoane + design.md **Stare**: DRAFT — pentru /autoplan (implementarea NU e facuta inca) **Data**: 2026-06-27 **Sursa de design**: [docs/design.md](../design.md) (sursa de adevar pentru planurile de design) > Nota: o sesiune anterioara a explorat o implementare + mockup-uri si a fost REVENITA > (working tree readus la 5.12). Acest PRD ramane ca specificatie de planificat prin > `/autoplan`. Sectiunile „Livrabile" / „Raport VERIFY" de mai jos descriu directia > propusa si dovezile din explorare, NU stare livrata — re-validati prin autoplan. ## Context / problema PRD 5.12 a marcat „responsive tableta/mobil" ca livrat, dar dogfooding-ul real (screenshot-uri `localhost_8010_.png`, `step3-preview.png`, `tablet-820.png`, `mobile-*.png`) a aratat ca paginile arata execrabil pe ecrane mici: - **P0 break vertical**: in cardurile de Trimiteri pe mobil, eticheta lua `min-width:120px` fix iar valoarea (nod text intr-un flex) se strangea la ~0 si `word-break:break-word` o spargea **caracter cu caracter pe verticala** („B 0 7 5 8" pe coloana). Ilizibil. - **P0 stepper import**: 4 coloane egale cu text + `overflow:hidden` → pe tableta „Confirma trimiterea" era taiat; pe mobil 4 benzi minuscule cu text pe 3 randuri. - **P0 tabel preview pe tableta** (768–1024px): 8 coloane `table-layout:fixed` cu latimi fixe storceau vehicul+operatie → text rupt. - **P1 „afiseaza tot ca pe desktop"**: cardurile aratau toate cele 6–8 campuri, nu esentialul. - **P1 butoane exagerate**: `.tabel-card td button { width:100%; min-height:44px }` facea Salveaza + Sterge **doua blocuri full-width** unul sub altul; butoanele icon-only din „Mapari salvate" aveau **iconite invizibile** (SVG mic intr-un bloc colorat mare). - **P2**: mapare coloane cu scroll orizontal pe mobil; versiunea `vX.Y.Z` ocupa spatiu in header pe mobil; bara sticky de confirmare se rupea necontrolat. Feedback user pe mockup-uri (2026-06-27): - Compactarea sa fie **si pe desktop** (ex. wizard-ul mai compact peste tot). - Pe **desktop** butoanele Salveaza/Sterge = **doar text** (fara iconita). - Pe **mobil** = iconite, dar un set modern, **recognoscibil** (Lucide stroke), nu cele vechi. - Nevoie de un **design.md** pe care planurile de design sa-l foloseasca. ## Decizii (confirmate cu user prin AskUserQuestion + mockup-uri) 1. **Directie**: carduri compacte, esential vizibil, butoane mici. (D: „da, dar ajustez") 2. **Tableta (768–1024px)**: tabelele actionabile devin **carduri, 2 pe rand** (grid). 3. **Scope**: pachet complet P0+P1+P2 + teste + acest PRD + ROADMAP + design.md. 4. **Butoane**: desktop = text; mobil = iconita patrata 44px, set **Lucide stroke** (contur). 5. **Wizard**: compact **peste tot** (inclusiv desktop): bara slim pe o linie; pe mobil „Pasul N din 4 · Titlu" + bara de progres. ## Livrabile ### design.md (nou) Sistemul de design: principii, tokeni (culoare 4 teme, tipografie IBM Plex, spatiere, radius, elevatie), breakpoints (768/1024), scara de control (44/36/32), componente (butoane, card, tabel→card, stepper, pill, formulare, modal), accesibilitate, si o sectiune „Pentru planurile de design". Sursa de adevar; planurile pornesc de aici. ### Cod (doar CSS + markup template; backend NEATINS) - **`_macros.html`**: macro `icon(name)` (Lucide save/trash/edit/plus, stroke) + `act_btn(label, ic, kind, attrs)` (buton de actiune responsiv: desktop text / mobil iconita). - **`base.html`** (CSS, inline): - Sistem de butoane `.btn-secondary/.btn-ghost/.btn-danger/.btn-sm` + default primar imbunatatit (font-weight 500, focus-visible). - Sistem `.act` / `.act-save` / `.act-del` / `.act-group`: desktop = text, mobil = iconita 44px. - Stepper compact `.stepper*` (track slim desktop/tableta; rezumat + bara progres mobil). - Card mobil Trimiteri/Preview **rescris**: stivuit compact, vehicul = titlu, stare = pill, `#`/checkbox ascunse, **fara gap fix de 120px** (fix break vertical). - **Tableta 768–1024px**: `.tabel-trimiteri` + `.tabel-card` → grid 2 carduri/rand. - Versiune ascunsa pe mobil; bara sticky confirmare compacta; mapare coloane stivuita full-width. - Coloana actiuni preview 92→104px + `.btn-editeaza { white-space:nowrap }`. - **`_stepper.html`**: rescris pe clasele compacte (fara stiluri inline inalte). - **`_mapari.html`**: butoanele icon-only inlocuite cu `act_btn` (salvate + reguli-text + formate-coloane). ### Teste - `test_web_responsive.py`: aserturile existente pastrate (toate trec). - `test_web_mapari_actiuni.py`: actualizat de la `.icon-btn` la sistemul `.act` (act-save/act-del, aria-label pe fiecare, `.act-ic` prezent), docstring marcat „superseda 5.10". ## Invariante respectate - Breakpoint unic 768px + densitate 1024px; un singur bloc `@media (max-width:767px) {` principal pe care se bazeaza testele (regulile noi adaugate inauntru, nu in blocuri noi inaintea lui). - Tabelele dense read-only (Jurnal/Nomenclator/Admin) raman scroll-contained, NU se cardifica. - Backend trimitere (worker, masina stari, idempotenta, contract RAR, canal API, mapping, validation) NEATINS. Zero schema. Pur CSS + markup. ## Raport VERIFY (live, app pornit cu DB seedata, Playwright 390/820/1280) - **Trimiteri mobil 390**: carduri compacte, pill stare + vehicul bold + operatie+cod, fara break vertical. Header compact, versiune ascunsa. PASS. - **Trimiteri tableta 820**: grid 2 carduri/rand, fara scroll orizontal. PASS. - **Trimiteri desktop 1280**: tabel complet neschimbat (fara regresie). PASS. - **Mapari mobil 390**: Salveaza = iconita discheta albastra, Sterge = iconita cos rosu (Lucide, patrate 44px, recognoscibile), NU blocuri full-width. PASS. - **Wizard import**: compact pe o linie pe desktop (✓ Incarca · ✓ Coloane · 3 Verifica · 4 Confirma) + ajutor sub; pe mobil „Pasul 3 din 4 · Verifica" + bara progres. PASS. - **Preview import mobil 390**: carduri compacte per rand + bara confirmare compacta. PASS. - Regresie pytest: vezi ROADMAP (suita verde). ## Debt notat (neblocant) - Duplicarea pill stare + `eticheta_problema` pe error/needs_* arata redundant in carduri („Eroare / Eroare") — logica de continut in `routes.py`/`labels.py`, nu responsive. - Filtrele de data (Azi/7zile/30zile/Custom) stivuiesc full-width pe mobil (4 randuri); ar putea fi grid 2x2 — imbunatatire viitoare. --- # GSTACK REVIEW REPORT > Pipeline: CEO -> Design -> Eng -> Final Gate (DX skipped: produs end-user, nu unealta de developer). > Voci: Claude subagent independent pe fiecare faza. **Codex INDISPONIBIL** (usage limit > OpenAI pana la 2026-07-18) -> toate fazele ruleaza `[subagent-only]`. Consensul nu poate > fi "CONFIRMED de ambele modele"; o singura voce. ## Faza 1 — CEO (strategie & scope) ### CEO dual voices - **Codex (CEO):** `[codex-unavailable: usage limit]`. - **Claude subagent (CEO):** rulat foreground, independent. Findings: - **F1 (high):** premisa "utilizarea pe mobil e reala" e asumata, nedovedita. Submiterea RAR e data-entry din xlsx/csv la receptia service-ului = task desktop/tastatura. Wizardul (upload -> mapare -> preview -> commit) e greu utilizabil pe telefon indiferent de CSS. Niciun semnal real (analytics/cerere user) citat; doar screenshot-uri ale propriului render urat. - **F2 (high):** reframe — durerea reala sunt bug-urile de layout de pe DESKTOP (break vertical, stepper taiat, butoane full-width, iconite invizibile), nu "responsive". Tier 1 = bug-uri + sistem butoane + design.md (valoare clara, zilnica). Tier 2 = cardificare mobil/tableta (speculativ). - **F3 (medium):** "CSS inline intr-un singur