fix(leaderboard, navbar): position rank badges & fix dashboard hamburger overlay

Author: sheikhlimon

src/components/dashboard/LeaderBoard/leaderboard.css

@@ -485,6 +485,11 @@
   transition: background-color 0.2s ease;
 }
 
+/* Ensure each contributor row is a positioning context so absolute rank badges stay inside the row */
+.contributor-row {
+  position: relative;
+}
+
 .light .contributor-row.even {
   background: #fff;
 }
@@ -513,6 +518,32 @@
   padding: 0 8px;
 }
 
+/* Make rank cell a stable container for the badge (desktop + mobile) */
+.contributor-cell.rank-cell {
+  position: relative;
+  width: 40px;
+  padding: 8px;
+}
+
+/* Position the badge inside the cell */
+.rank-badge {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-weight: 700;
+  font-size: 0.85rem;
+  line-height: 1;
+}
+
 .avatar {
   width: 40px;
   height: 40px;

src/components/dashboard/LeaderBoard/leaderboard.tsx

@@ -1,14 +1,7 @@
 // src/components/dashboard/LeaderBoard/leaderboard.tsx
 import React, { JSX, useState } from "react";
 import { motion } from "framer-motion";
-import {
-  FaTrophy,
-  FaStar,
-  FaCode,
-  FaUsers,
-  FaGithub,
-  FaSearch,
-} from "react-icons/fa";
+import { FaStar, FaCode, FaUsers, FaGithub, FaSearch } from "react-icons/fa";
 import { ChevronRight, ChevronLeft } from "lucide-react";
 import { useColorMode } from "@docusaurus/theme-common";
 import { useCommunityStatsContext } from "@site/src/lib/statsProvider";
@@ -528,12 +521,18 @@ export default function LeaderBoard(): JSX.Element {
                 transition={{ duration: 0.3, delay: index * 0.05 }}
                 className={`contributor-row ${isDark ? (index % 2 === 0 ? "even" : "odd") : index % 2 === 0 ? "even" : "odd"}`}
               >
+                {/*
+                  This avoids indexOf() issues and is O(1).
+                */}
                 <div className={`contributor-cell rank-cell`}>
-                  <div
-                    className={`rank-badge ${getRankClass(filteredContributors.indexOf(contributor))}`}
-                  >
-                    {filteredContributors.indexOf(contributor) + 1}
-                  </div>
+                  {(() => {
+                    const rankIndex = indexOfFirst + index; // zero-based global index
+                    return (
+                      <div className={`rank-badge ${getRankClass(rankIndex)}`}>
+                        {rankIndex + 1}
+                      </div>
+                    );
+                  })()}
                 </div>
                 <div className="contributor-cell avatar-cell">
                   <img

src/pages/dashboard/dashboard.css

@@ -12,7 +12,7 @@
   position: fixed;
   top: 70px;
   left: 20px;
-  z-index: 1100;
+  z-index: 100;
   background: var(--ifm-color-primary);
   color: white;
   border: none;
@@ -32,7 +32,7 @@
 }
 
 .dashboard-menu-btn.open {
-  background: #dc3545;
+  display: none;
 }
 
 /* Mobile Menu */