feat: display totalSolved in leaderboard UI (#99)

* feat: display totalSolved in leaderboard UI

* formatting

Author: Yashaswini-K-P

frontend/leaderboard.html

@@ -105,6 +105,7 @@ <h1 class="page-title">Leaderboard</h1>
             <div class="easy">Easy</div>
             <div class="medium">Medium</div>
             <div class="hard">Hard</div>
+            <div class="total">Total</div>
             <div class="score-header">
               Score
               <div class="tooltip-container">
@@ -428,6 +429,7 @@ <h1 class="page-title">Leaderboard</h1>
                     <div class="easy">${user.data.easySolved}</div>
                     <div class="medium">${user.data.mediumSolved}</div>
                     <div class="hard">${user.data.hardSolved}</div>
+                    <div class="total">${user.data.totalSolved}</div>
                     <div class="mobile-score tooltip-score">
                             <span>${user.score}</span>
                              <span class="score-caret"></span>
@@ -441,6 +443,9 @@ <h1 class="page-title">Leaderboard</h1>
                             <div>
                                 Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
                             </div>
+                            <div>
+                              Questions Solved: ${user.data.totalSolved}
+                            </div>
                             <hr>
                             <div>
                                 <strong>Total: ${user.score}</strong>
@@ -468,6 +473,9 @@ <h1 class="page-title">Leaderboard</h1>
                                 <div>
                                     Hard: ${user.data.hardSolved} × ${hardPoints} = ${hardScore}
                                 </div>
+                                <div>
+                                  Questions Solved: ${user.data.totalSolved}
+                                </div>
                                 <hr>
                                 <div>
                                     <strong>Total: ${user.score}</strong>
@@ -500,6 +508,10 @@ <h1 class="page-title">Leaderboard</h1>
                             <div class="mobile-stat-number hard">${user.data.hardSolved}</div>
                             <div class="mobile-stat-label">Hard</div>
                         </div>
+                        <div class="mobile-stat">
+                            <div class="mobile-stat-number total">${user.data.totalSolved}</div>
+                            <div class="mobile-stat-label">Total</div>
+                        </div>
                     </div>
                 `;
           mobileCards.appendChild(card);

frontend/styles/main.css

@@ -818,7 +818,7 @@ body::after {
 
 .leaderboard-header {
   display: grid;
-  grid-template-columns: 55px 1fr 170px 65px 65px 65px 85px;
+  grid-template-columns: 55px 1fr 170px 65px 65px 65px 85px 85px;
   padding: 0.7rem 1.25rem;
   background: var(--bg-raised);
   font-weight: 700;
@@ -834,7 +834,7 @@ body::after {
 
 .leaderboard-row {
   display: grid;
-  grid-template-columns: 55px 1fr 170px 65px 65px 65px 85px;
+  grid-template-columns: 55px 1fr 170px 65px 65px 65px 85px 85px;
   padding: 0.6rem 1.25rem;
   border-bottom: 1px solid var(--border);
   transition: background 0.1s ease;
@@ -1008,6 +1008,7 @@ body::after {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.5rem;
+  gap: 12px;
 }
 
 .mobile-rank {
@@ -1021,13 +1022,20 @@ body::after {
   font-weight: 700;
   color: var(--amber);
   text-shadow: 0 0 6px rgba(255, 176, 0, 0.3);
+  white-space: nowrap !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
 }
 
 .mobile-name {
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: 0.2rem;
   color: var(--text);
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .mobile-username {
@@ -1622,8 +1630,8 @@ body::after {
 
 @media (max-width: 768px) {
   .score-tooltip {
-    left: auto;
-    right: 0;
+    left: auto !important;
+    right: -10px !important;
     /* left: 50%; */
     transform: translateX(0%);
     white-space: normal;
@@ -2183,7 +2191,7 @@ body::-webkit-scrollbar-thumb {
 .tooltip-score {
   position: relative;
   cursor: pointer;
-  display: inline-flex;
+  display: inline-flex !important;
   /* key fix */
   width: fit-content;
   align-items: center;
@@ -2192,6 +2200,7 @@ body::-webkit-scrollbar-thumb {
   color: #ffffff;
   font-weight: 700;
   text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
+  flex-shrink: 0;
 }
 
 .score-tooltip {