|
162 | 162 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
163 | 163 | } |
164 | 164 |
|
| 165 | + |
165 | 166 | :root { |
166 | | - --lb-grid: 0.6fr /* Rank */ 1.5fr /* Name */ 1.2fr /* Affiliation */ 1.2fr /* Type */ 0.8fr |
167 | | - /* Arena */ 0.8fr /* Opt. Select */ 0.8fr /* Opt. Cost */ 0.8fr /* Opt. Acc */ 0.8fr |
168 | | - /* Latency */ 0.8fr; /* Robust */ |
| 167 | + --lb-grid: |
| 168 | + minmax(0, 0.6fr) /* Rank */ |
| 169 | + minmax(0, 1.5fr) /* Name */ |
| 170 | + minmax(0, 1.4fr) /* Affiliation */ |
| 171 | + minmax(0, 1.1fr) /* Type */ |
| 172 | + minmax(0, 0.8fr) |
| 173 | + minmax(0, 0.8fr) |
| 174 | + minmax(0, 0.8fr) |
| 175 | + minmax(0, 0.8fr) |
| 176 | + minmax(0, 0.8fr) |
| 177 | + minmax(0, 0.8fr); |
169 | 178 | } |
170 | 179 |
|
| 180 | + |
171 | 181 | .leaderboard-header { |
172 | 182 | display: grid; |
173 | 183 | grid-template-columns: var(--lb-grid); |
|
183 | 193 | align-items: center; |
184 | 194 | } |
185 | 195 |
|
186 | | -.leaderboard-header > div { |
187 | | - padding: 8px 12px; |
| 196 | +.leaderboard-header > div, |
| 197 | +.leaderboard-row > div { |
| 198 | + min-width: 0 !important; |
| 199 | + padding: 0.75rem 0.75rem; |
188 | 200 | overflow: hidden; |
189 | 201 | text-overflow: ellipsis; |
190 | 202 | white-space: nowrap; |
191 | | - text-align: center; |
192 | 203 | } |
193 | 204 |
|
194 | | -.leaderboard-header .name-col, |
195 | | -.leaderboard-header .affiliation-col { |
196 | | - text-align: left; |
197 | | -} |
| 205 | + |
198 | 206 |
|
199 | 207 | .leaderboard-body { |
200 | 208 | max-height: none; |
|
220 | 228 | text-align: center; |
221 | 229 | } |
222 | 230 |
|
223 | | -.leaderboard-row .name-col, |
224 | | -.leaderboard-row .affiliation-col { |
225 | | - text-align: left; |
226 | | -} |
227 | 231 |
|
228 | 232 | .leaderboard-row:hover { |
229 | 233 | background: #f8fafc; |
|
312 | 316 | background: var(--rank-other-bg); |
313 | 317 | color: var(--rank-other-text); |
314 | 318 | } |
315 | | - |
316 | | -.name-col { |
317 | | - display: flex; |
318 | | - align-items: center; |
319 | | - text-align: left; |
320 | | - justify-content: flex-start; |
321 | | - min-width: 0 !important; |
322 | | - overflow-x: auto !important; |
323 | | - white-space: nowrap !important; |
324 | | -} |
325 | | - |
| 319 | +.name-col, |
326 | 320 | .affiliation-col { |
327 | | - scrollbar-width: thin; |
328 | | - min-width: 0 !important; |
329 | | - overflow-x: auto !important; |
330 | | - white-space: nowrap !important; |
331 | | - |
| 321 | + white-space: normal !important; |
| 322 | + overflow: visible !important; |
332 | 323 | } |
333 | 324 |
|
334 | | - |
| 325 | +/* Actual text wrapping */ |
| 326 | +.router-name, |
335 | 327 | .affiliation { |
336 | | - display: inline-block; |
337 | | - min-width: max-content; /* content defines its own width */ |
338 | | - padding-bottom: 4px; |
339 | | - |
| 328 | + white-space: normal !important; |
| 329 | + overflow-wrap: break-word; |
| 330 | + word-break: break-word; |
| 331 | +} |
340 | 332 |
|
| 333 | +.metrics-col, |
| 334 | +.rank-col, |
| 335 | +.type-col { |
| 336 | + white-space: nowrap; |
341 | 337 | } |
342 | 338 |
|
| 339 | + |
343 | 340 | .router-info { |
344 | 341 | display: flex; |
345 | 342 | flex-direction: column; |
|
753 | 750 | overflow: hidden; |
754 | 751 | /* text-overflow: ellipsis; */ |
755 | 752 | white-space: nowrap; |
| 753 | + min-width: 0 !important; |
| 754 | + |
756 | 755 | } |
757 | 756 |
|
758 | 757 | /* Preserve left alignment for name and affiliation columns */ |
|
0 commit comments