.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
align-items: stretch;
}
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table th:first-child,
table td:first-child {
position: sticky;
left: 0;
background: #fff;
z-index: 2;
box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);
}Am văzut de-a lungul anilor zeci de dashboard-uri care arătau impecabil pe monitoarele de 27 de inch ale designerilor, dar care deveneau un coșmar pe un laptop de 13 inch sau, mai rău, pe un telefon. Când ai de afișat zeci de metrici, grafice și tabele cu 15 coloane, responsivitatea nu mai e doar despre media queries, ci despre supraviețuire. Am pățit asta la un proiect pentru un CRM masiv, unde trebuia să înghesuim datele a peste 8k de useri activi fără să stricăm fluxul de lucru.
Sidebar-ul care nu stă în cale
Prima problemă e mereu sidebar-ul. Pe desktop, vrei acces rapid la module. Pe mobil, vrei să dispară. Am testat mai multe variante și cea mai eficientă rămâne cea hibridă. Pe ecrane mari, sidebar-ul stă fix la un 260px. Când ecranul scade sub 1200px, îl trec automat într-o stare „collapsed” de 64px, unde rămân doar iconițele.
Trade-off-ul e evident: userii care nu cunosc platforma pe de rost se vor simți pierduți fără text. Soluția mea a fost să adaug tooltips pe hover doar în starea restrânsă. Pe mobil, sub 768px, sidebar-ul trebuie să iasă complet din fluxul paginii și să devină un overlay declanșat de un buton de burger. Dacă încerci să-l lași „vizibil” parțial pe mobil, ai pierdut deja 20-30% din spațiul util pentru date, ceea ce e inacceptabil.
Tabelele și scroll-ul orizontal controlat
Tabelele sunt moartea pasiunii pe ecrane mici. Am încercat varianta în care transformi fiecare rând într-un card (display: block pe td-uri), dar la un tabel cu 20 de coloane, cardul rezultat e lung cât o zi de post și devine imposibil de scanat vizual.
La un proiect recent, am adoptat o strategie mai sănătoasă: overflow-x: auto pe containerul tabelului, dar cu o condiție critică — „sticky columns”. Am înghețat prima coloană (cea cu numele clientului sau ID-ul) folosind position: sticky; left: 0;. Astfel, userul poate să dea scroll orizontal până la coloana 15 fără să uite despre cine e vorba în rândul respectiv. E o îmbunătățire de UX care a redus frustrarea userilor cu peste 40%, conform feedback-ului primit după release.
Carduri care se așază singure
Pentru zona de metrici (KPIs), am renunțat demult la grilele fixe de tip Bootstrap cu col-md-3. CSS Grid e mult mai flexibil aici. Folosesc grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)).
De ce e mai bine? Pentru că auto-fit umple spațiul rămas gol, iar minmax se asigură că nicio bucată de conținut nu devine prea îngustă ca să mai fie citibilă. Dacă ai un ecran ultra-wide, vei avea 5-6 carduri pe rând. Pe un iPad, vei avea 2. Pe un iPhone, se vor pune automat unul sub altul. Fără să scriu niciun @media screen.
Totuși, mare atenție la înălțimea cardurilor. Dacă ai carduri cu înălțimi diferite în aceeași grilă, dashboard-ul va arăta ca un puzzle stricat. Folosește height: 100% pe elementele din interiorul grid-ului sau align-items: stretch pe container.
Voi cum gestionați tabelele cu zeci de coloane pe ecrane mici? Mergeți pe varianta cu scroll orizontal sau preferați să ascundeți coloanele mai puțin importante prin setări de vizibilitate?