diff --git a/src/components/CompareModal.tsx b/src/components/CompareModal.tsx index e2d7ff7..f2d5eee 100644 --- a/src/components/CompareModal.tsx +++ b/src/components/CompareModal.tsx @@ -103,7 +103,7 @@ const CompareModal: React.FC = ({ .slice(0, 6); }, [searchTerm, routerIds]); - const spiderChartHeight = isCompactLayout ? 420 : 520; + const spiderChartHeight = isCompactLayout ? 360 : 460; const spiderOuterRadius = isCompactLayout ? '65%' : '80%'; const spiderChartMargin = isCompactLayout ? { top: 32, right: 32, bottom: 32, left: 32 } @@ -260,6 +260,18 @@ useEffect(() => { const spiderChartDomain: [number, number] = activeMetric === 'cost' ? spiderValueDomain : [0, 100]; + const formatSpiderTick = useCallback( + (value: number) => { + if (activeMetric === 'cost') { + if (!Number.isFinite(value)) return '$0'; + const precise = value.toFixed(6).replace(/0+$/, '').replace(/\.$/, '.0'); + return `$${precise}`; + } + return value.toFixed(0); + }, + [activeMetric] + ); + useEffect(() => { if (activeBarAxis && !currentAxes.includes(activeBarAxis)) { setActiveBarAxis(''); @@ -730,7 +742,7 @@ useEffect(() => { )} /> - + {routerIds.map((id, index) => ( = ({ position="right" formatter={(value: number) => { if (metricKey === 'cost') { - return value.toFixed(5); + const safeValue = Number.isFinite(value) ? value : 0; + const precise = safeValue.toFixed(5).replace(/0+$/, '').replace(/\.$/, '.0'); + return `$${precise}`; } - return value.toFixed(1); + return Number.isFinite(value) ? value.toFixed(1) : '0.0'; }} fill="#0f172a" fontSize={12} diff --git a/src/pages/LeaderboardPage.css b/src/pages/LeaderboardPage.css index bac938a..3d57ad4 100644 --- a/src/pages/LeaderboardPage.css +++ b/src/pages/LeaderboardPage.css @@ -11,21 +11,6 @@ } -.leaderboard-full-bleed { - width: 100vw; - position: relative; - left: 50%; - right: 50%; - margin-left: -50vw; - padding: 0 1rem; - margin-bottom: 2rem; -} - -.leaderboard-full-bleed .leaderboard-container { - width:90vw; - margin: 0 auto; -} - .page-header { text-align: center; margin-bottom: 2rem; @@ -339,8 +324,8 @@ --lb-grid: minmax(0, 0.5fr) /* Select */ minmax(0, 0.7fr) /* Rank */ - minmax(0, 2.0fr) /* Name */ - minmax(0, 1.1fr) /* Affiliation */ + minmax(0, 1.8fr) /* Name */ + minmax(0, 0.7fr) /* Affiliation */ minmax(0, 0.9fr) /* Arena */ minmax(0, 0.9fr) /* Accuracy */ minmax(0, 0.9fr) /* Cost/1k */ @@ -367,14 +352,6 @@ align-items: center; } -.leaderboard-header > div, -.leaderboard-row > div { - padding: 0.75rem 0.75rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - .leaderboard-body { @@ -658,14 +635,17 @@ border-radius: 24px; padding: 1.5rem; width: min(1200px, 100%); - height: 82vh; /* 👈 FIXED height */ - overflow: scroll; /* 👈 prevent modal scrolling */ + height: 82vh; + overflow: hidden; display: flex; flex-direction: column; } .compare-modal-body { + flex: 1; min-height: 0; + overflow-y: auto; + overflow-x: hidden; } .compare-modal-header { display: flex; @@ -704,6 +684,7 @@ min-height: 100vh; border-radius: 0; padding: 1rem; + overflow-y: auto; } .compare-modal-body { @@ -865,10 +846,10 @@ - +/* .compare-modal-chart.primary { min-height: 480px; -} +} */ @media (max-width: 768px) { .compare-modal-chart.primary { @@ -1333,20 +1314,6 @@ cursor: pointer; } -.router-name-link .router-name::after { - content: ''; - position: absolute; - left: 0; - bottom: -0.15rem; - width: 100%; - height: 2px; - background: #2563eb; - opacity: 0; - transform: scaleX(0.85); - transform-origin: left; - transition: opacity 0.2s ease, transform 0.2s ease; -} - .router-name-link:hover .router-name { color: #1d4ed8; } @@ -1407,7 +1374,7 @@ .metrics-col { display: flex; justify-content: center; - align-items: center; + align-items: left; } .metric-value { @@ -1772,22 +1739,7 @@ align-items: center; } -/* Prevent content like "closed-source" or long affiliations from stretching columns */ -.leaderboard-header > div, -.leaderboard-row > div { - overflow: hidden; - /* text-overflow: ellipsis; */ - white-space: nowrap; - -} -/* Preserve left alignment for name and affiliation columns */ -.leaderboard-header .name-col, -.leaderboard-header .affiliation-col, -.leaderboard-row .name-col, -.leaderboard-row .affiliation-col { - text-align: left; -} /* Fix type badge and prevent flex growth */ .type-col { @@ -1820,8 +1772,9 @@ /* put padding on cells (same for header and rows) */ .leaderboard-header > div, .leaderboard-row > div { - padding: 0.75rem 0.75rem !important; - overflow: hidden; + padding: 0.75rem 0rem !important; + text-align: left; + overflow: visible; /* text-overflow: ellipsis; */ white-space: nowrap; } diff --git a/src/pages/LeaderboardPage.tsx b/src/pages/LeaderboardPage.tsx index e1652a5..932e06f 100644 --- a/src/pages/LeaderboardPage.tsx +++ b/src/pages/LeaderboardPage.tsx @@ -378,7 +378,6 @@ const LeaderboardPage: React.FC = () => { {/* Leaderboard Table */} -
@@ -617,7 +616,6 @@ const LeaderboardPage: React.FC = () => {
-
{modelCardRouter && (
setModelCardRouter(null)}>
event.stopPropagation()}>