diff --git a/app/web/templates/base.html b/app/web/templates/base.html
index c7b7eda..07fa994 100644
--- a/app/web/templates/base.html
+++ b/app/web/templates/base.html
@@ -34,6 +34,11 @@
[data-theme="light"] { --bg:#f6f7f9; --card:#ffffff; --ink:#1a1d24; --muted:#5c6473; --line:#e2e5ea;
--ok:#15803d; --warn:#b45309; --err:#dc2626; --accent:#2563eb; }
* { box-sizing:border-box; }
+ /* PRD 5.9 US-006 — CONVENTIE BREAKPOINT: un singur prag mobil la 768px.
+ CSS custom properties NU functioneaza in `@media`, deci pragul nu poate fi o
+ variabila; folosim consecvent `@media (max-width:767px)` peste tot (mobil) si
+ `@media (max-width:1024px)` doar pentru densitatea tabelului. >=1024px = layout
+ desktop neschimbat (fara regresie). Orice regula mobila noua reutilizeaza 767px. */
body { margin:0; font:15px/1.5 ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
header { padding:16px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
@@ -197,7 +202,8 @@
}
/* === Modal detaliu (PRD 5.9 US-003): fereastra modala globala, in afara zonei de
poll (#submissions-wrap). Backdrop + dialog centrat pe desktop; focus-trap +
- scroll-lock + inert pe sunt in JS. Varianta full-screen mobil vine in US-006. === */
+ scroll-lock + inert pe sunt in JS. Varianta full-screen mobil: vezi blocul
+ `@media (max-width:767px)` US-006 de mai jos. === */
.modal-overlay { position:fixed; inset:0; z-index:1100; display:flex;
align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; }
.modal-overlay[hidden] { display:none; }
@@ -214,8 +220,12 @@
body.modal-open { overflow:hidden; }
.modal-eroare { padding:16px 4px; }
.modal-eroare .actiuni { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
- /* <768px: card per rand (eticheta:valoare stivuit), nu tabel -> fara scroll orizontal */
+ /* === PRD 5.9 US-006: fundatie responsive mobil (<768px) ===
+ Breakpoint unic 767px (vezi conventia de sus). Cuprinde: card per rand pe tabelul
+ de trimiteri (5.8, pastrat), modal full-screen, header/nav colapsat cu tinte touch
+ >=44px. Desktop (>=1024px) ramane neschimbat — regulile de baza nu se modifica. */
@media (max-width:767px) {
+ /* Tabel trimiteri: card per rand (eticheta:valoare stivuit) -> fara scroll orizontal */
.tabel-trimiteri table { table-layout:auto; }
.tabel-trimiteri thead { display:none; }
.tabel-trimiteri table, .tabel-trimiteri tbody, .tabel-trimiteri tr, .tabel-trimiteri td { display:block; width:auto; }
@@ -224,6 +234,25 @@
.tabel-trimiteri td::before { content:attr(data-eticheta); color:var(--muted); font-size:12px;
flex:0 0 auto; min-width:120px; }
.tabel-trimiteri td.col-chk { display:none; }
+
+ /* Modal full-screen: ocupa tot ecranul, fara backdrop lateral (overlay fara
+ padding, dialog la latime/inaltime pline, fara colturi/umbra). Scroll intern
+ pe dialog; butonul `x` la >=44px (tinta touch). Desktop pastreaza varianta
+ centrata cu `max-width:680px` din regula de baza de mai sus. */
+ .modal-overlay { padding:0; align-items:stretch; justify-content:stretch; }
+ .modal-dialog { width:100vw; max-width:none; min-height:100vh; max-height:100vh;
+ border:none; border-radius:0; box-shadow:none;
+ padding:16px; padding-top:56px; overflow-y:auto; }
+ .modal-close { width:44px; height:44px; top:8px; right:8px; font-size:24px; }
+
+ /* Header + nav colapsate: header se rupe pe linii, fara scroll orizontal de pagina;
+ tintele touch (toggle tema/cont, taburi, itemi meniu cont) cresc la >=44px. */
+ header { padding:12px 16px; flex-wrap:wrap; gap:8px; }
+ header h1 { font-size:17px; }
+ main { padding:16px; }
+ .icon-btn { min-height:44px; min-width:44px; }
+ .tab-link { min-height:44px; padding:10px 14px; }
+ .cont-menu a, .cont-menu button { min-height:44px; }
}
diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json
index 795e4b5..8ea6d02 100644
--- a/scripts/ralph/prd.json
+++ b/scripts/ralph/prd.json
@@ -93,12 +93,12 @@
],
"requiresBrowserCheck": true,
"requiresDesignReview": true,
- "passes": false,
+ "passes": true,
"failed": false,
"blocked": false,
"retries": 0,
"failureReason": "",
- "notes": ""
+ "notes": "Atins: app/web/templates/base.html (conventie breakpoint unic 767px documentata; bloc `@media (max-width:767px)` US-006 extins cu: modal full-screen — overlay fara padding/align-stretch, dialog 100vw/100vh fara border-radius/umbra, modal-close 44x44px, scroll intern; header colapsat flex-wrap + main padding redus; tinte touch >=44px pe .icon-btn/.tab-link/.cont-menu items; comentariu desktop modal actualizat), tests/test_web_responsive.py NOU (3 teste: test_viewport_meta_prezent, test_modal_fullscreen_clasa_mobil, test_nav_colapsabil_sub_breakpoint). meta viewport deja prezent (confirmat, neatins). Nav colapsabil (hamburger cont + tab-bar overflow-x) deja livrat de PRD-uri anterioare; US-006 a adaugat doar tintele touch 44px sub breakpoint. Gates: pytest PASS (fisier 3/3; suita completa 829 passed, 1 deselected — fata de 826 inainte). DEFERAT la VERIFY: requiresBrowserCheck + requiresDesignReview (gstack browser la 375px pe / — fara scroll orizontal, hamburger deschide meniul, modal full-screen + inchidere din x) NErulate in loop fara browser."
},
{
"id": "US-002",
diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt
index f8753f1..f662be9 100644
--- a/scripts/ralph/progress.txt
+++ b/scripts/ralph/progress.txt
@@ -68,3 +68,31 @@ Note: PRD APROBAT 2026-06-24 cu revizii obligatorii R1-R12 (raport AUTOPLAN). R1
- US-004 (detaliu editabil in-place + butoane in modal), US-005 (poll nu inchide modalul), US-006/007/008 (responsive).
- VERIFY: ruleaza gstack E2E pe `/` pentru AC requiresBrowserCheck (eticheta sub pill, fara chevron, cod fara prefix, click deschide modal).
---
+
+## US-006: Fundatie responsive — viewport, header/nav, modal full-screen mobil, breakpoint-uri
+
+### Ce s-a livrat:
+- app/web/templates/base.html: CONVENTIE breakpoint unic 768px documentata (CSS custom props nu
+ merg in @media -> folosim consecvent `@media (max-width:767px)` pentru mobil; >=1024px = desktop
+ neschimbat). Blocul `@media (max-width:767px)` extins cu:
+ - Modal full-screen pe mobil: overlay fara padding + align/justify:stretch (fara backdrop lateral);
+ dialog 100vw/100vh, fara border-radius/umbra, padding-top:56px, scroll intern; modal-close 44x44px.
+ - Header colapsat: flex-wrap + gap + padding redus; h1 mai mic; main padding 16px.
+ - Tinte touch >=44px: .icon-btn (toggle tema/cont hamburger), .tab-link, itemii .cont-menu.
+ - Comentariul CSS desktop al modalului actualizat (full-screen mobil livrat, nu „vine in US-006").
+- tests/test_web_responsive.py NOU: test_viewport_meta_prezent, test_modal_fullscreen_clasa_mobil,
+ test_nav_colapsabil_sub_breakpoint (markup/CSS in HTML randat prin TestClient).
+
+### Learnings:
+- meta viewport era DEJA prezent (base.html:5) -> AC „confirmat/adaugat" = confirmat, neatins.
+- Nav colapsabil (hamburger cont #cont-menu-toggle ☰ + dropdown hidden; tab-bar cu overflow-x:auto)
+ era deja livrat de PRD-uri anterioare (5.5 US-006, 5.3 tab-bar). US-006 5.9 a adaugat DOAR
+ tratamentul touch 44px sub breakpoint + modalul full-screen (modalul e nou din US-003 5.9).
+- Desktop nefatat: regula de baza `.modal-dialog { max-width:680px }` ramane; doar media mobil o
+ suprascrie. Test asigura ambele (max-width:680px prezent + media 767px cu 100vw/100vh/44px).
+
+### Next:
+- US-007 (responsive pagini continut), US-008 (responsive Acasa + login/signup) — depind de US-006 (gata).
+- VERIFY: gstack browser la 375px pe `/` — fara scroll orizontal de pagina; ☰ deschide meniul cont;
+ modal deschis ocupa tot ecranul si se inchide din `x` (requiresBrowserCheck + requiresDesignReview).
+---
diff --git a/tests/test_web_responsive.py b/tests/test_web_responsive.py
new file mode 100644
index 0000000..7c7056a
--- /dev/null
+++ b/tests/test_web_responsive.py
@@ -0,0 +1,112 @@
+"""Teste PRD 5.9 US-006: fundatie responsive — viewport, header/nav colapsabil,
+modal full-screen pe mobil, breakpoint-uri consistente.
+
+Verificam markup-ul + CSS server-side randat (TestClient): prezenta meta viewport,
+existenta unei reguli `@media (max-width:767px)` care trece modalul pe full-screen
+(`.modal-dialog`) cu buton `x` >=44px, si structura de nav colapsabil (meniul de cont
+hamburger + tinte touch >=44px). Verificarile vizuale efective (375px, fara scroll
+orizontal) sunt deferate la VERIFY (gstack browser).
+"""
+
+from __future__ import annotations
+
+import os
+import re
+import tempfile
+
+import pytest
+from starlette.testclient import TestClient
+
+
+def _create_account_user(email: str, name: str = "Service", password: str = "parolasecreta10"):
+ from app.accounts import create_account
+ from app.users import create_user
+ from app.db import get_connection
+
+ conn = get_connection()
+ try:
+ acct_id = create_account(conn, name, active=True)
+ create_user(conn, acct_id, email, password)
+ return acct_id
+ finally:
+ conn.close()
+
+
+def _login(client, email: str, password: str = "parolasecreta10") -> None:
+ resp = client.get("/login")
+ m = re.search(r'name="csrf_token"\s+value="([^"]+)"', resp.text) or \
+ re.search(r'value="([^"]+)"\s+name="csrf_token"', resp.text)
+ assert m
+ resp = client.post("/login", data={"email": email, "parola": password, "csrf_token": m.group(1)})
+ assert resp.status_code == 303
+
+
+@pytest.fixture()
+def client(monkeypatch):
+ tmp = tempfile.mkdtemp()
+ monkeypatch.setenv("AUTOPASS_DB_PATH", os.path.join(tmp, "responsive.db"))
+ monkeypatch.setenv("AUTOPASS_WEB_AUTH_REQUIRED", "true")
+ from app.config import get_settings
+ get_settings.cache_clear()
+ from app.web import ratelimit
+ ratelimit._hits.clear()
+ from app.main import app
+ with TestClient(app, follow_redirects=False) as c:
+ yield c
+ ratelimit._hits.clear()
+ get_settings.cache_clear()
+
+
+def test_viewport_meta_prezent(client):
+ """`` cu width=device-width prezent in base.html."""
+ _create_account_user("vp@test.com")
+ _login(client, "vp@test.com")
+ html = client.get("/?tab=acasa").text
+ assert 'name="viewport"' in html
+ assert "width=device-width" in html
+ assert "initial-scale=1" in html
+
+
+def test_modal_fullscreen_clasa_mobil(client):
+ """Sub 768px modalul devine full-screen: o regula `@media (max-width:767px)`
+ pune `.modal-dialog` la latime/inaltime pline (fara latimea marginita de desktop)
+ si butonul `x` la >=44px. Desktop pastreaza regula centrata (`max-width:680px`)."""
+ _create_account_user("mf@test.com")
+ _login(client, "mf@test.com")
+ html = client.get("/?tab=acasa").text
+
+ # Regula de baza (desktop) ramane: dialog centrat cu latime marginita.
+ assert "max-width:680px" in html
+
+ # Exista un bloc media mobil care vizeaza modalul.
+ assert "@media (max-width:767px)" in html
+ # Markerul US-006 pentru modalul full-screen pe mobil.
+ assert "US-006" in html
+ # Dialogul ocupa tot ecranul pe mobil (latime/inaltime pline, fara border-radius lateral).
+ mobil = html[html.find("@media (max-width:767px)"):]
+ assert "100vw" in mobil or "width:100%" in mobil
+ assert "100vh" in mobil
+ # Butonul de inchidere >=44px pe mobil (tinta touch).
+ assert "44px" in mobil
+
+
+def test_nav_colapsabil_sub_breakpoint(client):
+ """Nav colapsabil: meniul de cont e un buton hamburger (☰) ascuns intr-un dropdown,
+ iar tintele touch (icon-btn, tab-link, itemi meniu) ajung la >=44px sub breakpoint."""
+ _create_account_user("nav@test.com")
+ _login(client, "nav@test.com")
+ html = client.get("/?tab=acasa").text
+
+ # Hamburger-ul de cont exista si dropdown-ul e colapsat (hidden) implicit.
+ assert 'id="cont-menu-toggle"' in html
+ assert "☰" in html # pictograma hamburger
+ assert 'id="cont-menu"' in html
+ assert 'class="cont-menu"' in html
+
+ # Tab-bar-ul (nav principal) exista si e scrollabil orizontal (nu deborda pagina).
+ assert "tab-bar" in html
+ assert "overflow-x:auto" in html
+
+ # Sub breakpoint, tintele touch din header/nav cresc la >=44px.
+ mobil = html[html.find("@media (max-width:767px)"):]
+ assert "44px" in mobil