.dashboard-layout {
display: grid;
grid-template-columns: 260px 1fr;
grid-template-areas: "sidebar main";
transition: grid-template-columns 0.3s ease;
}
.dashboard-layout.collapsed {
grid-template-columns: 80px 1fr;
}
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Coloana sticky care salvează UX-ul pe mobil */
.table-container th:first-child,
.table-container td:first-child {
position: sticky;
left: 0;
background: #fff;
z-index: 10;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
.dashboard-layout {
grid-template-columns: 1fr;
grid-template-areas: "main";
}
.sidebar {
display: none; /* Sau transformat în drawer */
}
}M-am lovit de problema asta serios la un CRM cu vreo 8.000 de utilizatori activi, unde majoritatea agenților de vânzări stăteau pe tablete sau telefoane în timp ce erau pe teren. Clientul voia totul: grafice, tabele cu 15 coloane și un sidebar plin de link-uri. Pe un monitor de 27 inch arăta impecabil, dar pe un iPhone 13 era un dezastru total.
Sidebar-ul: Collapsible sau Drawer?
Prima greșeală pe care am făcut-o acum câțiva ani a fost să încerc să înghesui sidebar-ul folosind doar procente. E o rețetă sigură pentru frustrare. Acum merg pe un layout de grid unde sidebar-ul are o lățime fixă pe desktop (de obicei 260px) și se restrânge la iconițe (60-80px) pe ecrane medii.
Folosesc grid-template-areas pentru că îmi permite să mut sidebar-ul jos sau să-l transform într-un overlay pe ecrane sub 768px. E mult mai curat decât să te bați cu float sau position: absolute. Trade-off-ul sincer aici? Dacă ai un meniu foarte adânc, cu 3-4 niveluri de nesting, varianta collapsible devine un coșmar de UX. Uneori e mai cinstit să muți totul într-un hamburger menu clasic care ocupă tot ecranul pe mobil.
Coșmarul tabelelor cu multe date
Să fim realiști: tabelele pe mobil sunt oribile. Am încercat varianta aia în care transformi fiecare rând într-un card folosind selectorul :before și content: attr(data-label). Merge bine pentru liste simple, dar la un proiect cu 150 de rute și mii de intrări, DOM-ul o ia razna și scroll-ul devine sacadat pe dispozitivele mai slabe.
La proiectul de care ziceam, am ales calea cea mai simplă, dar care a redus bounce rate-ul pe mobil cu aproape 20%: overflow-x: auto pe un wrapper și prima coloană (cea cu numele clientului) să fie sticky. Utilizatorul știe mereu la ce rând se uită în timp ce dă scroll orizontal. E un compromis mult mai bun decât să încerci să forțezi datele într-un format care nu li se potrivește.
Cards și stacking-ul logic
Când trecem de la 3-4 coloane de carduri la una singură, problema nu e lățimea, ci ierarhia informației. Pe un dashboard de management, vrei ca acele KPI-uri esențiale (Total Sales, Active Leads) să rămână sus, nu să fie îngropate sub un grafic lung de 500px care s-a prăbușit primul în layout.
Aici intervin unitățile clamp(). În loc să scriu 5 media queries diferite pentru font-uri și padding-uri, folosesc grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)). Se așează singure și arată bine pe orice rezoluție, de la un ceas smart până la un monitor ultra-wide.
Totuși, mare atenție la aspect ratio-ul graficelor (Chart.js sau Recharts) din interiorul cardurilor. Un grafic care arată bine 16:9 pe desktop va arăta ca o dungă orizontală ilizibilă pe un telefon dacă nu îi forțezi o înălțime minimă prin CSS. Eu am învățat asta pe pielea mea după ce un client s-a plâns că nu vede axa Y pe mobil.
Voi cum abordați tabelele masive pe ecrane mici? Mergeți pe scroll orizontal cu coloane sticky sau faceți efortul de a rescrie tot layout-ul în card-uri?