From 182ec2151be5fa03662a865107de609e9966a857 Mon Sep 17 00:00:00 2001
From: Nicholas Gottlieb <nicholasgottlieb@Nicholass-MacBook-Pro-2.local>
Date: Thu, 6 Aug 2026 10:51:03 -0600
Subject: [PATCH] Fix bar chart scale on mobile and shorten the ops/second
 label

The fixed 90px/170px side columns left almost no room for the actual
bar track on narrow viewports (down to ~51px). Below 480px, shrink
those columns, stack the value/relative labels vertically to reclaim
horizontal space, and reduce a few font sizes accordingly.

Also shortens "operations / second" to "ops/second" under the axis.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/Benchmark/index.tsx         |  6 ++--
 src/components/Benchmark/styles.module.css | 35 ++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/components/Benchmark/index.tsx b/src/components/Benchmark/index.tsx
index fcbf66d9..3360570e 100644
--- a/src/components/Benchmark/index.tsx
+++ b/src/components/Benchmark/index.tsx
@@ -111,7 +111,9 @@ export default function Benchmark({
               </span>
               <span className={styles.value}>
                 <span
-                  className={clsx({ [styles.winnerName]: engine.isWinner })}
+                  className={clsx(styles.opsValue, {
+                    [styles.winnerName]: engine.isWinner,
+                  })}
                 >
                   {formatOps(engine.ops)}
                 </span>
@@ -135,7 +137,7 @@ export default function Benchmark({
               <span key={i}>{label}</span>
             ))}
           </div>
-          <div className={styles.axisCaption}>operations / second</div>
+          <div className={styles.axisCaption}>ops/second</div>
         </div>
         <span />
       </div>
diff --git a/src/components/Benchmark/styles.module.css b/src/components/Benchmark/styles.module.css
index 8ecd6030..d057756c 100644
--- a/src/components/Benchmark/styles.module.css
+++ b/src/components/Benchmark/styles.module.css
@@ -95,6 +95,41 @@
   margin-top: 4px;
 }
 
+@media (max-width: 480px) {
+  .row,
+  .axis {
+    grid-template-columns: 64px minmax(0, 1fr) 76px;
+    gap: 8px;
+  }
+
+  .name {
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
+
+  .value {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0;
+  }
+
+  .opsValue {
+    font-size: 0.75rem;
+  }
+
+  .relative {
+    font-size: 0.62rem;
+  }
+
+  .axisLabels {
+    font-size: 0.6rem;
+  }
+
+  .axisCaption {
+    font-size: 0.65rem;
+  }
+}
+
 .resultsTable {
   width: 100%;
   margin: 1.25rem 0 2rem;