feat: adjust formatting slightly

src/RaceChart.tsx

@@ -34,6 +34,7 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
   const gap = 8;
   const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
   const barHeight = (height - 2 * padding) / players.length;
+  const fontSize = Math.min(barHeight - 1.5 * gap, width / 20);
 
   return (
     <svg width={width} height={height}>
@@ -51,41 +52,43 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
       {players.map((player, index) => (
         <g>
           <text
-            key={index}
+            key={index + "_name"}
             x={4}
             y={index * barHeight + barHeight / 2 + padding + gap / 2}
             width={(1 - player.rank / maxValue) * width}
             height={barHeight - 8} // subtract 2 for some spacing between bars
-            fontSize={`${barHeight - 1.5 * gap}px`}
+            fontSize={fontSize}
             fill="aliceblue"
             stroke="#36c"
             strokeWidth={4}
             fontWeight={"bold"}
             paintOrder={"stroke fill"}
             fontFamily="monospace"
+            style={{ whiteSpace: "pre" }}
           >
-            {index + 1}. {player.name}
+            {`${String(index + 1).padStart(2)}. ${player.name}`}
           </text>
           <text
-            key={index}
+            key={index + "_value"}
             x={
               4 +
               (4 + Math.max(...players.map((p, _) => p.name.length))) *
-                (barHeight - 1.5 * gap) *
+                fontSize *
                 0.66
             }
             y={index * barHeight + barHeight / 2 + padding + gap / 2}
             width={(1 - player.rank / maxValue) * width}
             height={barHeight - 8} // subtract 2 for some spacing between bars
-            fontSize={`${0.75 * (barHeight - 1.5 * gap)}px`}
+            fontSize={0.8 * fontSize}
             fill="aliceblue"
             stroke="#36c"
             fontWeight={"bold"}
+            fontFamily="monospace"
             strokeWidth={4}
             paintOrder={"stroke fill"}
             style={{ whiteSpace: "pre" }}
           >
-            {`${player.rank} ± ${player.std}     N = ${player.n}`}
+            {`${String(player.rank).padStart(5)} ± ${player.std}   N = ${player.n}`}
           </text>
         </g>
       ))}