diff --git a/src/pages/LeaderboardPage.css b/src/pages/LeaderboardPage.css index 74fe201..13be73d 100644 --- a/src/pages/LeaderboardPage.css +++ b/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 */