Fix pagination buttons styling in leaderboard on small screens

Author: Srijatalamarla

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 {
@@ -883,7 +886,7 @@
   }
 
   /* Pagination mobile styles */
-  .pagination {
+  /* .pagination {
     flex-wrap: wrap;
     gap: 6px;
     padding: 16px 0;
@@ -906,6 +909,62 @@
     width: 32px;
     height: 32px;
     font-size: 14px;
+  } */
+}
+
+/* Pagination responsive styles */
+@media (max-width: 768px) {
+  .contributors-container .pagination {
+    flex-direction: row;
+    gap: 0;
+  }
+
+  .contributors-container .page-numbers {
+    flex-wrap: nowrap;
+    gap: 0;
+    padding: 0;
+  }
+
+  .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;
   }
 }