Update frontend/src/App.js

frontend/src/App.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { chain } from 'lodash';
 import './App.css';
 
-const ScoreBar = ({ score }) => {
+const ScoreBar = ({ score, isVanilla = false }) => {
   if (score === undefined || score === null) return null;
   
   const percentage = score <= 1 ? score * 100 : score;
@@ -15,7 +15,10 @@ const ScoreBar = ({ score }) => {
         className="score-fill" 
         style={{ 
           width: `${percentage}%`,
-          backgroundColor 
+          backgroundColor,
+          height: isVanilla ? '6px' : '12px', // Make vanilla bars thinner with inline style
+          borderRadius: isVanilla ? '0' : '4px'  // Make vanilla bars square
+          opacity: isVanilla ? 0.6 : 1 // Dim vanilla score bars
         }} 
       />
       <span className="score-text">
@@ -161,9 +164,9 @@ const App = () => {
                 </td>
                 {["Average", "GAIA", "MATH", "SimpleQA"].map(metric => (
                   <td key={metric}>
-                    <ScoreBar score={item.scores[metric]} />
+                    <ScoreBar score={item.scores[metric]} isVanilla=false/>
                     {showVanilla && getVanillaScore(item.model_id, metric) !== undefined && (
-                      <ScoreBar score={getVanillaScore(item.model_id, metric)} />
+                      <ScoreBar score={getVanillaScore(item.model_id, metric)} isVanilla=true/>
                     )}
                   </td>
                 ))}