Merge pull request #912 from Srijatalamarla/fix/pagination-buttons

Restore PR #856 - fixes pagination buttons styling in leaderboard on small screens

Author: sanjay-kv

src/components/dashboard/LeaderBoard/leaderboard.css

@@ -750,15 +750,18 @@
 }
 
 /* Pagination ellipsis */
-.pagination-ellipsis {
+.contributors-container .pagination-ellipsis {
   display: flex;
   justify-content: center;
-  align-items: center;
   width: 40px;
   height: 40px;
   font-weight: bold;
   font-size: 18px;
+  -webkit-user-select: none;
   user-select: none;
+  letter-spacing: 2px;
+  background: none;
+  border: none;
 }
 
 .light .pagination-ellipsis {
@@ -881,32 +884,62 @@
   .points-cell {
     justify-self: center;
   }
+}
 
-  /* Pagination mobile styles */
-  .pagination {
-    flex-wrap: wrap;
-    gap: 6px;
-    padding: 16px 0;
-  }
-
-  .page-numbers {
-    order: 2;
-    width: 100%;
-    justify-content: center;
-    margin-top: 8px;
+/* Pagination responsive styles */
+@media (max-width: 768px) {
+  .contributors-container .pagination {
+    flex-direction: row;
+    gap: 0;
   }
 
-  .pagination-btn {
-    width: 36px;
-    height: 36px;
+  .contributors-container .page-numbers {
+    flex-wrap: nowrap;
+    gap: 0;
+    padding: 0;
   }
 
-  .page-btn,
-  .pagination-ellipsis {
+  .contributors-container .page-numbers .page-btn,
+  .contributors-container .pagination .pagination-btn,
+  .contributors-container .pagination-ellipsis {
+    min-width: 32px;
     width: 32px;
     height: 32px;
+    padding: 8px;
     font-size: 14px;
   }
+
+  .contributors-container .pagination span {
+    min-width: 32px;
+    background: none;
+    border: none;
+  }
+}
+
+@media (max-width: 475px) {
+
+  .contributors-container .page-numbers .page-btn,
+  .contributors-container .pagination .pagination-btn,
+  .contributors-container .pagination-ellipsis {
+    min-width: 24px;
+    width: 24px;
+    height: 24px;
+    margin: 0 4px;
+    font-size: 12px;
+  }
+
+  .contributors-container .pagination span {
+    min-width: 24px;
+  }
+}
+
+@media (max-width: 320px) {
+
+  .contributors-container .page-numbers .page-btn,
+  .contributors-container .pagination .pagination-btn,
+  .contributors-container .pagination-ellipsis {
+    margin: 0 2px;
+  }
 }
 
 /* Skeleton Loader Styles */