fixed gradient bug in asc mode

frontend/leaderboard.html

@@ -19,8 +19,8 @@
     <style>
         #table-outer {
             position: relative;
-            --green-opacity: 0.07;
-            --red-opacity: 0;
+            --gradient-opacity: 0.07;
+            --gradient-scroll: 0;
         }
 
         #table-outer::after {
@@ -29,10 +29,10 @@
             inset: 0;
             background: linear-gradient(
                 to bottom,
-                rgba(16, 185, 129, var(--green-opacity)) 0%,
+                rgba(16, 185, 129, calc(var(--gradient-opacity) * (1 - var(--gradient-scroll)))) 0%,
                 transparent 30%,
                 transparent 70%,
-                rgba(239, 68, 68, var(--red-opacity)) 100%
+                rgba(239, 68, 68, calc(var(--gradient-opacity) * var(--gradient-scroll))) 100%
             );
             pointer-events: none;
             z-index: 1;
@@ -40,6 +40,16 @@
             transition: background 0.15s ease;
         }
 
+        #table-outer[data-sort-dir="desc"]::after {
+            background: linear-gradient(
+                to bottom,
+                rgba(239, 68, 68, calc(var(--gradient-opacity) * (1 - var(--gradient-scroll)))) 0%,
+                transparent 30%,
+                transparent 70%,
+                rgba(16, 185, 129, calc(var(--gradient-opacity) * var(--gradient-scroll))) 100%
+            );
+        }
+
         #table-wrapper {
             max-height: 700px;
             overflow-y: auto;
@@ -1601,6 +1611,13 @@
                     currentSort = (currentSort.colId !== colId) ? { colId, dir: 'asc' } : { colId: (currentSort.dir === 'asc' ? colId : null), dir: (currentSort.dir === 'asc' ? 'desc' : 'none') };
                     prepareColumns(lbData);
                     applyFilters();
+                    // Refresh gradient to reflect new sort direction
+                    setTimeout(() => {
+                        const wrapper = $('#table-wrapper');
+                        if (!wrapper) return;
+                        const max = wrapper.scrollHeight - wrapper.clientHeight;
+                        applyGradient(max > 0 ? wrapper.scrollTop / max : 0);
+                    }, 50);
                 };
 
                 window.toggleFilterPanel = function () {
@@ -1697,15 +1714,22 @@
                     highlight.style.height = `${outer.offsetHeight}px`;
                 }
 
+                function applyGradient(ratio) {
+                    const outer = $('#table-outer');
+                    if (!outer) return;
+                    outer.style.setProperty('--gradient-scroll', ratio.toFixed(3));
+                    outer.dataset.sortDir = currentSort ? currentSort.dir : 'none';
+                }
+
                 function initGradientScroll() {
                     const wrapper = $('#table-wrapper');
-                    const outer = $('#table-outer');
-                    if (!wrapper || !outer) return;
+                    if (!wrapper) return;
+                    // Set correct initial gradient for current sort direction
+                    const initMax = wrapper.scrollHeight - wrapper.clientHeight;
+                    applyGradient(initMax > 0 ? wrapper.scrollTop / initMax : 0);
                     wrapper.addEventListener('scroll', () => {
                         const max = wrapper.scrollHeight - wrapper.clientHeight;
-                        const ratio = max > 0 ? wrapper.scrollTop / max : 0;
-                        outer.style.setProperty('--green-opacity', (0.07 * (1 - ratio)).toFixed(3));
-                        outer.style.setProperty('--red-opacity', (0.07 * ratio).toFixed(3));
+                        applyGradient(max > 0 ? wrapper.scrollTop / max : 0);
                         updateAvgColHighlight();
                     }, { passive: true });
                 }