Update/compare modal styling (#33)

* made columns closer

* inlined leaderboard

* removed blue horizontal line

* Fixed scroll bar issue

* fixed axis label styling for cost

* get rid of trailing zeros

Author: shenrunzhang

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

@@ -635,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;
@@ -681,6 +684,7 @@
     min-height: 100vh;
     border-radius: 0;
     padding: 1rem;
+    overflow-y: auto;
   }
 
   .compare-modal-body {
@@ -842,10 +846,10 @@
 
 
 
-
+/*
 .compare-modal-chart.primary {
   min-height: 480px;
-}
+} */
 
 @media (max-width: 768px) {
   .compare-modal-chart.primary {