scrollable fair table

Author: lathug

website/js/fair-distribution.js

@@ -968,15 +968,15 @@
         d3.descending(a.actual.Silver, b.actual.Silver) ||
         d3.descending(a.actual.Bronze, b.actual.Bronze)
       )
-      .slice(0, 10);
+      .slice(0, 300);
 
     const fairRanking = [...rows]
       .sort((a, b) =>
         d3.descending(a.fair.Gold || 0, b.fair.Gold || 0) ||
         d3.descending(a.fair.Silver || 0, b.fair.Silver || 0) ||
         d3.descending(a.fair.Bronze || 0, b.fair.Bronze || 0)
       )
-      .slice(0, 10);
+      .slice(0, 300);
 
     root.html(`
       <div class="fair-ranking-controls">

website/styles.css

@@ -1221,6 +1221,33 @@ p {
   justify-content: space-between;
 }
 
+.fair-ranking-card {
+  max-height: 520px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.fair-ranking-card::-webkit-scrollbar {
+  width: 8px;
+}
+
+.fair-ranking-card::-webkit-scrollbar-track {
+  background: rgba(255,255,255,0.08);
+  border-radius: 999px;
+}
+
+.fair-ranking-card::-webkit-scrollbar-thumb {
+  background: #f4b400;
+  border-radius: 999px;
+}
+
+.fair-ranking-table thead th {
+  position: sticky;
+  top: 0;
+  background: #111;
+  z-index: 2;
+}
+
 /* =============================================
    Footer
    =========================================== */