Update/compare modal styling

src/components/CompareModal.tsx

@@ -103,7 +103,7 @@ const CompareModal: React.FC<CompareModalProps> = ({
       .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(() => {
                             </text>
                           )}
                         />
-                        <PolarRadiusAxis domain={spiderValueDomain} tickCount={5} />
+                        <PolarRadiusAxis domain={spiderValueDomain} tickCount={5} tickFormatter={formatSpiderTick} />
                         {routerIds.map((id, index) => (
                           <Radar
                             key={id}

src/components/DifficultyBarPanel.tsx

@@ -95,9 +95,11 @@ const DifficultyBarPanel: React.FC<DifficultyBarPanelProps> = ({
                 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}

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;
 }

src/pages/LeaderboardPage.tsx

@@ -378,7 +378,6 @@ const LeaderboardPage: React.FC = () => {
         </div>
 
         {/* Leaderboard Table */}
-        <div className="leaderboard-full-bleed">
         <div className="leaderboard-container">
           <div className="leaderboard-scroll">
             <div className="leaderboard-header">
@@ -617,7 +616,6 @@ const LeaderboardPage: React.FC = () => {
             </div>
           </div>
         </div>
-        </div>
       {modelCardRouter && (
         <div className="model-card-modal-overlay" onClick={() => setModelCardRouter(null)}>
           <div className="model-card-modal" onClick={event => event.stopPropagation()}>