Enhancement/leaderboard

src/pages/LeaderboardPage.css

@@ -162,12 +162,22 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+
 :root {
-  --lb-grid: 0.6fr /* Rank */ 1.5fr /* Name */ 1.2fr /* Affiliation */ 1.2fr /* Type */ 0.8fr
-    /* Arena */ 0.8fr /* Opt. Select */ 0.8fr /* Opt. Cost */ 0.8fr /* Opt. Acc */ 0.8fr
-    /* Latency */ 0.8fr; /* Robust */
+  --lb-grid:
+    minmax(0, 0.6fr)   /* Rank */
+    minmax(0, 1.5fr)   /* Name */
+    minmax(0, 1.4fr)   /* Affiliation */
+    minmax(0, 1.1fr)   /* Type */
+    minmax(0, 0.8fr)
+    minmax(0, 0.8fr)
+    minmax(0, 0.8fr)
+    minmax(0, 0.8fr)
+    minmax(0, 0.8fr)
+    minmax(0, 0.8fr);
 }
 
+
 .leaderboard-header {
   display: grid;
   grid-template-columns: var(--lb-grid);
@@ -183,18 +193,16 @@
   align-items: center;
 }
 
-.leaderboard-header > div {
-  padding: 8px 12px;
+.leaderboard-header > div,
+.leaderboard-row > div {
+  min-width: 0 !important;
+  padding: 0.75rem 0.75rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  text-align: center;
 }
 
-.leaderboard-header .name-col,
-.leaderboard-header .affiliation-col {
-  text-align: left;
-}
+
 
 .leaderboard-body {
   max-height: none;
@@ -220,10 +228,6 @@
   text-align: center;
 }
 
-.leaderboard-row .name-col,
-.leaderboard-row .affiliation-col {
-  text-align: left;
-}
 
 .leaderboard-row:hover {
   background: #f8fafc;
@@ -312,34 +316,27 @@
   background: var(--rank-other-bg);
   color: var(--rank-other-text);
 }
-
-.name-col {
-  display: flex;
-  align-items: center;
-  text-align: left;
-  justify-content: flex-start;
-  min-width: 0 !important;
-  overflow-x: auto !important;
-  white-space: nowrap !important;
-}
-
+.name-col,
 .affiliation-col {
-  scrollbar-width: thin;
-  min-width: 0 !important;
-  overflow-x: auto !important;
-  white-space: nowrap !important;
-
+  white-space: normal !important;
+  overflow: visible !important;
 }
 
-
+/* Actual text wrapping */
+.router-name,
 .affiliation {
-  display: inline-block;
-  min-width: max-content; /* content defines its own width */
-  padding-bottom: 4px;
-
+  white-space: normal !important;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
 
+.metrics-col,
+.rank-col,
+.type-col {
+  white-space: nowrap;
 }
 
+
 .router-info {
   display: flex;
   flex-direction: column;
@@ -753,6 +750,8 @@
   overflow: hidden;
   /* text-overflow: ellipsis; */
   white-space: nowrap;
+  min-width: 0 !important;
+
 }
 
 /* Preserve left alignment for name and affiliation columns */