/* Trucul cu umbră dinamică pentru tabele cu scroll orizontal */
.table-container {
overflow-x: auto;
background:
/* Umbrele de acoperire albe din stânga și dreapta */
linear-gradient(to right, white 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0,
/* Umbrele reale de scroll (gri) */
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)),
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}Dacă ai avut vreodată de făcut un dashboard complex, știi deja chinul: clientul vrea 15 coloane în tabel, 4 grafice și un sidebar plin de link-uri, toate funcționale pe un ecran de telefon. Am trecut prin asta anul trecut la un SaaS de HR cu vreo 12k utilizatori activi lunar, unde surpriza a fost că peste 40% din trafic venea de pe mobil, contrar așteptărilor noastre inițiale. Iată cum am rezolvat cele mai mari trei probleme de layout fără să ne complicăm cu scripturi JS greoaie.
Sidebar-ul collapsible: dincolo de simplul hamburger menu
Pe desktop, un sidebar lat de 260px este perfect. Pe mobil însă, devine rapid un coșmar de UX. Am testat inițial varianta de a lăsa doar iconițele pe ecrane medii (tablete), dar am observat în Hotjar că utilizatorii dădeau click greșit constant. Nimeni nu știe ce înseamnă o pictogramă obscură fără un text explicativ lângă ea.
Soluția care a funcționat excelent: pe ecrane sub 1024px, sidebar-ul devine complet ascuns în afara ecranului folosind transform: translateX(-100%) și se activează ca un sertar (drawer) peste conținut, cu un backdrop semi-transparent. Pe desktop în schimb, am lăsat un buton simplu de toggle care doar reduce lățimea la 80px și ascunde textul folosind o clasă .collapsed aplicată pe body. Am economisit cam 15% spațiu util pe ecranele de laptop de 13 inchi doar din optimizarea asta.
Marele inamic: Tabelele cu zeci de coloane
Aici se dă adevărata bătălie. Managerii vor să vadă tot: nume, email, rol, status, ultima conectare și alte cinci câmpuri custom. Dacă le înghesui pe mobil, textul se rupe urât și devine indescifrabil.
Am încercat varianta la modă acum câțiva ani: transformarea fiecărui rând de tabel într-un card separat pe mobil. Arată curat vizual, dar e un eșec total de UX dacă utilizatorul vrea să compare rapid datele din 10 rânduri. Trebuie să facă scroll la infinit și își pierde reperele.
Am ales un trade-off sincer: am păstrat structura de tabel, dar l-am pus într-un container cu overflow-x: auto. Ca să nu pară un bug de design, am adăugat un indicator vizual. Folosind un truc de CSS cu umbre gradient, am reușit să arătăm o umbră subtilă în partea dreaptă a tabelului doar atunci când mai există coloane ascunse care cer scroll. Când utilizatorul ajunge la capătul tabelului, umbra dispare natural.
Grid-ul de KPI-uri (Cards stack)
La orice dashboard ai acele 3-4 carduri în partea de sus cu cifre cheie. Pe desktop le pui frumos pe 4 coloane folosind CSS Grid. Pe mobil, instinctul te împinge să le pui pe o singură coloană (stack).
Problema apare la înălțimea totală a paginii. Dacă fiecare card are 120px înălțime, pe mobil ocupi tot ecranul doar cu indicatorii de performanță, iar utilizatorul trebuie să dea scroll masiv ca să ajungă la tabelul de dedesubt. Recomandarea mea este să schimbi direcția flexbox-ului pe mobil. În loc de structura verticală (iconiță sus, cifră la mijloc, text jos), pune-le pe un singur rând (flex-row), redu padding-ul și micșorează textul. Cardul ocupă acum doar 60px pe verticală, iar ecranul rămâne aerisit.
În final, design-ul responsive pentru dashboard-uri nu înseamnă doar să înghesui elemente ca să încapă în ecran, ci să decizi ce este critic pentru utilizatorul aflat pe drum. Voi ce abordare folosiți pentru tabelele mari pe mobil? Mergeți pe scroll orizontal sau pe transformarea în carduri?