Rafinament și adaptare a aspectului B2B-office: eliminarea CLS/LCP, aducerea acestuia la un sistem de proiectare și adaptabilitate între browsere

Situație inițială: există un cont personal B2B pentru clienții unei companii de logistică (comenzi, stări, documente, plăți). Aspectul a fost deja implementat în proiect, dar este asamblat în fragmente și se comportă instabil la diferite puncte de întrerupere. Pe unele pagini, există salturi de aspect la încărcarea datelor, tabelele „float”, ferestre modale și o întrerupere fixă ​​a antetului, iar pe iOS Safari există defilări orizontale. Figma are un sistem de design actualizat și aspecte ale ecranului cheie, dar implementarea actuală nu se potrivește.

Mediu tehnic: Next.js 14 (App Router), TypeScript, Module CSS + PostCSS, utilitare parțial Tailwind, componente React, asamblare prin Vercel. Interfața de utilizare folosește o simplă bibliotecă locală de componente (Button, Input, Modal, Tabs), dar în unele locuri stilurile sunt setate direct în componente. Datele sosesc asincron, există schelete, virtualizarea rândurilor într-un tabel pe una dintre pagini. Depozitar pe GitHub, sarcinile sunt acceptate prin PR.

Ce trebuie făcut: aduceți aspectul existent la un sistem stabil de adaptabilitate și design fără a rescrie logica și fără a schimba stiva de tehnologie.
- Efectuați un audit de 6-8 pagini cheie: Tabloul de bord, Lista comenzilor, Cardul de comandă, Documente, Plăți, Profil.
- Remediați adaptabilitatea pentru punctele de întrerupere 360/768/1024/1440 fără a modifica structura datelor și API-ul.
- Eliminați sursele de CLS și pâlpâirea în timpul încărcării: rezervați dimensiuni pentru grafice/tabele/cărți, reparați scheletele, stabilizați înălțimea antetului și a barelor de instrumente.
- Normalizați grila și marginile pentru jetoanele de design din Figma: aduceți tipografie, spațiere, raze, umbre la valorile specificate, eliminați valorile „magice” duplicate.
- Îmbunătățiți tabelele: antet fix, coloane previzibile, silabe și tăiere, defilare orizontală corectă numai în interiorul tabelului pe ecrane înguste, menținând accesibilitatea.
- Remediați ferestrele modale și meniurile derulante: poziționare corectă, interzicerea derulării în fundal, capcană de focalizare, lucrați pe iOS Safari fără săriți când apare tastatura.
- Aduceți stilurile la o abordare unificată: mutați stilurile inline în modulele CSS unde afectează suportul, eliminați clasele Tailwind conflictuale pe componentele problematice fără a rupe restul aspectului.

Limitări: nu puteți schimba radical logica de afaceri, rutarea, contractele API și biblioteca de componente. Nu puteți conecta cadre grele de UI. Este permisă adăugarea de mici utilități pentru măsurarea/fixarea dimensiunilor și îmbunătățirea accesibilității, dacă este justificat. Este important să păstrați comportamentul SSR/CSR al Next.js și să nu degradați timpul de construcție.

Rezultat: PR cu modificări de aspect și stil, plus un scurt raport de reducere a problemelor găsite și soluțiilor luate, astfel încât echipa să poată susține în continuare.

Criterii de acceptare măsurabile:
1) Pe aceste pagini nu există un scroll orizontal la corp cu o lățime de 360/768/1024/1440 în Chrome/Firefox/Edge și Safari (macOS + iOS).
2) CLS de pe Dashboard and Order List este redus și nu depășește 0,1 la măsurarea Lighthouse în modul de producție, LCP nu este deteriorat față de valoarea curentă cu mai mult de 10%.
3) Tabelele nu rup grila, coloanele sunt lizibile, antetul este fix, iar derularea orizontală apare doar în interiorul containerului tabelului.
4) Ferestre modale: focusul nu depășește limitele, Esc se închide, defilarea paginii sub modal este blocată, pe iOS nu există smucituri de conținut la deschidere/închidere.
5) Stilurile corespund token-urilor din Figma în ceea ce privește parametrii de bază (fonturi, dimensiuni, indentări, raze) și nu există duplicarea regulilor critice în 2-3 locuri pentru o componentă.

Etapele așteptate de lucru sunt: ​​audit rapid și plan de editare, apoi PR iterativ pe blocuri (tabele, modale, grilă/jetoane), rulare finală și verificare față de criteriile de acceptare.