Fix benchmark bar chart scale on mobile

[worldsoup]

Summary

• The Benchmark component's bar rows used fixed 90px/170px side columns, which on narrow viewports left the actual bar track only ~51px wide — the chart looked broken/squished on mobile.
• Below 480px: shrink those columns to 64px/76px, stack the ops-value and relative-speed labels vertically instead of side-by-side, and scale down a few font sizes to fit without wrapping or overflowing.
• Shortened the axis caption from "operations / second" to "ops/second".

Test plan

• Verified at 375px width (iPhone-class) on GET and DEL (widest throughput numbers, e.g. 10,250,000) — no text overflow/wrapping, bar track grew from 51px to ~187px.
• Verified desktop layout is unchanged.
• tsc --noEmit and yarn docusaurus build both pass clean against latest main.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
documentation	Ready	Preview	Aug 6, 2026 4:52pm

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Fix Benchmark bar chart scale on mobile

🐞 Bug fix ✨ Enhancement 🕐 10-20 Minutes

AI Description

• Make Benchmark bar rows responsive so the bar track isn’t squished on narrow screens.
• Stack ops/relative labels and reduce font sizes below 480px to prevent overflow.
• Shorten the x-axis caption to “ops/second” for tighter layouts.

Diagram

graph TD
  A["Benchmark component"] --> B["styles.module.css"] --> C{"Viewport < 480px?"}
  C --> D["Desktop: 90/170 cols"]
  C --> E["Mobile: 64/76 cols"] --> F["Stack ops + rel"] --> G["Smaller fonts/caption"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Use fluid column widths via clamp()/min()

• ➕ Avoids a hard breakpoint; adapts more smoothly across device widths
• ➕ Potentially fewer future tweaks as content widths change
• ➖ Harder to reason about and tune than a single breakpoint
• ➖ Still may require stacking rules for extreme narrow widths

2. Container queries (instead of viewport media query)

• ➕ More robust if Benchmark is embedded in narrow sidebars/cards on desktop
• ➕ Decouples layout from global viewport width
• ➖ May require additional build/compat considerations depending on target browsers/tooling
• ➖ Adds conceptual complexity vs a simple @media rule

Recommendation: The current approach (a single 480px breakpoint + stacking) is the best fit for a docs UI: it’s predictable, low-risk, and directly addresses the squished bar-track issue. If the component is later reused in variable-width containers, consider migrating the breakpoint to a container query or using clamp()-based column sizing.

Files changed (2) +39 / -2

Bug fix (2) +39 / -2

index.tsxAdd ops value styling hook and tighten axis caption +4/-2

Add ops value styling hook and tighten axis caption

• Adds a dedicated .opsValue class on the ops number span so mobile-specific typography can target it cleanly. Shortens the axis caption text from “operations / second” to “ops/second” to reduce horizontal/vertical pressure on small screens.

src/components/Benchmark/index.tsx

styles.module.cssResponsive grid/typography adjustments for mobile benchmark chart +35/-0

Responsive grid/typography adjustments for mobile benchmark chart

• Introduces a max-width 480px breakpoint that reduces the row/axis side columns and gap to reclaim bar-track width. Switches the value block to vertical stacking and scales down several font sizes (name, ops value, relative label, axis labels/caption) to prevent wrapping/overflow on narrow viewports.

src/components/Benchmark/styles.module.css

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

_{To customize comments, go to the Qodo configuration screen, or learn more in the docs.}