Make and columns sticky

frontend/leaderboard.html

@@ -78,6 +78,78 @@
             border-top: none !important;
         }
 
+        #table-wrapper .gridjs-th.sticky-rank-col,
+        #table-wrapper .gridjs-td.sticky-rank-col {
+            position: sticky !important;
+            left: 0 !important;
+            z-index: 32 !important;
+            box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
+        }
+
+        #table-wrapper .gridjs-th.sticky-model-col,
+        #table-wrapper .gridjs-td.sticky-model-col {
+            position: sticky !important;
+            left: var(--sticky-model-left, 110px) !important;
+            z-index: 31 !important;
+            box-shadow: 1px 0 0 rgba(148, 163, 184, 0.25);
+        }
+
+        #table-wrapper .gridjs-th.sticky-rank-col,
+        #table-wrapper .gridjs-th.sticky-model-col {
+            z-index: 40 !important;
+            top: 0 !important;
+        }
+
+        #table-wrapper .gridjs-td.sticky-rank-col,
+        #table-wrapper .gridjs-td.sticky-model-col {
+            background: #fff !important;
+        }
+
+        .dark #table-wrapper .gridjs-td.sticky-rank-col,
+        .dark #table-wrapper .gridjs-td.sticky-model-col {
+            background: #1e293b !important;
+            box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
+        }
+
+        .dark #table-wrapper .gridjs-th.sticky-rank-col,
+        .dark #table-wrapper .gridjs-th.sticky-model-col {
+            box-shadow: 1px 0 0 rgba(71, 85, 105, 0.6);
+        }
+
+        /* Fallback sticky behavior (covers async re-renders where classes may lag). */
+        #table-wrapper table.gridjs-table thead th:nth-child(1) {
+            position: sticky !important;
+            left: 0 !important;
+            top: 0 !important;
+            z-index: 46 !important;
+            background: #f1f5f9 !important;
+        }
+
+        #table-wrapper table.gridjs-table tbody td:nth-child(1) {
+            position: sticky !important;
+            left: 0 !important;
+            z-index: 30 !important;
+        }
+
+        #table-wrapper table.gridjs-table thead th:nth-child(2) {
+            position: sticky !important;
+            left: var(--sticky-model-left, 110px) !important;
+            top: 0 !important;
+            z-index: 45 !important;
+            background: #f1f5f9 !important;
+        }
+
+        #table-wrapper table.gridjs-table tbody td:nth-child(2) {
+            position: sticky !important;
+            left: var(--sticky-model-left, 110px) !important;
+            z-index: 29 !important;
+        }
+
+        .dark #table-wrapper table.gridjs-table thead th:nth-child(1),
+        .dark #table-wrapper table.gridjs-table thead th:nth-child(2) {
+            background: #0f172a !important;
+        }
+
         .dark .gridjs-head,
         .dark th.gridjs-th {
             background-color: #0f172a !important;
@@ -98,6 +170,8 @@
         table.gridjs-table {
             width: 100% !important;
             table-layout: fixed;
+            border-collapse: separate !important;
+            border-spacing: 0 !important;
         }
 
         td.gridjs-td {
@@ -924,6 +998,11 @@
                         }
                     });
 
+                    if (!window.__stickyModelResizeBound) {
+                        window.addEventListener('resize', () => scheduleStickyApply());
+                        window.__stickyModelResizeBound = true;
+                    }
+
                     if (window.lucide) lucide.createIcons();
                 };
 
@@ -1318,6 +1397,53 @@
 
                 window.applyFilters = applyFilters;
 
+                function applyStickyModelNameColumn() {
+                    const wrapper = $('#table-wrapper');
+                    if (!wrapper) return false;
+                    const table = wrapper.querySelector('table.gridjs-table');
+                    if (!table) return false;
+
+                    const headers = [...table.querySelectorAll('thead th')];
+                    if (!headers.length) return false;
+                    const visibleCols = tableColumns.filter(c => !c.hidden).map(c => c.id);
+                    const rankIdx = visibleCols.indexOf("Rank");
+                    const modelIdx = visibleCols.indexOf("Model Name");
+
+                    headers.forEach(th => th.classList.remove('sticky-rank-col', 'sticky-model-col'));
+                    table.querySelectorAll('tbody tr').forEach(tr => {
+                        [...tr.children].forEach(td => td.classList.remove('sticky-rank-col', 'sticky-model-col'));
+                    });
+
+                    if (rankIdx >= 0 && headers[rankIdx]) {
+                        headers[rankIdx].classList.add('sticky-rank-col');
+                        table.querySelectorAll('tbody tr').forEach(tr => {
+                            if (tr.children[rankIdx]) tr.children[rankIdx].classList.add('sticky-rank-col');
+                        });
+                    }
+
+                    const rankWidth = (rankIdx >= 0 && headers[rankIdx]) ? headers[rankIdx].getBoundingClientRect().width : 0;
+                    wrapper.style.setProperty('--sticky-model-left', `${Math.max(0, Math.round(rankWidth))}px`);
+
+                    if (modelIdx >= 0 && headers[modelIdx]) {
+                        headers[modelIdx].classList.add('sticky-model-col');
+                        table.querySelectorAll('tbody tr').forEach(tr => {
+                            if (tr.children[modelIdx]) tr.children[modelIdx].classList.add('sticky-model-col');
+                        });
+                    }
+                    return true;
+                }
+
+                function scheduleStickyApply(retries = 8) {
+                    let attempts = 0;
+                    const run = () => {
+                        const ok = applyStickyModelNameColumn();
+                        if (ok || attempts >= retries) return;
+                        attempts += 1;
+                        setTimeout(() => requestAnimationFrame(run), 40);
+                    };
+                    run();
+                }
+
                 function applyFilters() {
                     if (!lbData.length) return;
                     const sVal = $('#searchInput').value.toLowerCase();
@@ -1375,6 +1501,7 @@
 
                     // 5. Update Grid
                     grid.updateConfig({ data: filtered, columns: tableColumns }).forceRender();
+                    scheduleStickyApply();
                     $('#modelCounter').innerText = `${filtered.length} / ${lbData.length}`;
                 }
 
@@ -1389,6 +1516,7 @@
                             td: 'bg-white dark:bg-darkcard text-slate-600 dark:text-slate-300 border-b border-slate-200 dark:border-slate-700 px-6 py-3'
                         }
                     }).render($('#table-wrapper'));
+                    scheduleStickyApply();
                 }
 
                 function prepareColumns(data) {