fix: improve mobile chart readability and fix label overflow#52
Merged
darcyclarke merged 1 commit intovltpkg:mainfrom Mar 5, 2026
Merged
Conversation
- On mobile, render horizontal bar charts per fixture instead of one tiny grouped chart — much more readable on narrow screens - Add overflow-hidden to all card/chart containers to prevent labels from floating outside their bounds - Strip version numbers from Y-axis labels on mobile to save space - Use ResponsiveContainer for mobile charts to properly adapt width - Add useMediaQuery hook for responsive chart layout switching - Desktop layout unchanged — keeps the grouped bar chart Co-authored-by: Darcy Clarke <darcy@darcyclarke.me>
vltbaudbot
pushed a commit
to vltbaudbot/benchmarks
that referenced
this pull request
Mar 5, 2026
…iner The mobile chart code paths (introduced in vltpkg#52) use <ResponsiveContainer> instead of <ChartContainer>, but the tooltip inside them used <ChartTooltipContent> which calls useChart() — a hook that requires <ChartContainer>'s context. This throws immediately when Recharts renders the tooltip component, crashing the app on screens < 768px. Fix: Add a standalone MobileTooltipContent component that provides the same tooltip UI without depending on useChart()/ChartContext. The desktop code paths continue using ChartTooltipContent inside ChartContainer as before.
lukekarrys
pushed a commit
that referenced
this pull request
Mar 5, 2026
…iner (#54) The mobile chart code paths (introduced in #52) use <ResponsiveContainer> instead of <ChartContainer>, but the tooltip inside them used <ChartTooltipContent> which calls useChart() — a hook that requires <ChartContainer>'s context. This throws immediately when Recharts renders the tooltip component, crashing the app on screens < 768px. Fix: Add a standalone MobileTooltipContent component that provides the same tooltip UI without depending on useChart()/ChartContext. The desktop code paths continue using ChartTooltipContent inside ChartContainer as before. Co-authored-by: baudbot-agent <baudbot-agent@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #50 addressing mobile chart feedback.
Problems
Changes
Mobile horizontal bar charts
On screens < 768px, both the "Total Time" and "Per Package" charts now render as individual fixture cards with horizontal bar charts (bars go left→right). This gives each fixture its own readable space instead of cramming everything into one chart.
Label overflow fix
All chart card containers now have
overflow-hiddenso labels can never escape their bounds.Desktop unchanged
The grouped vertical bar chart layout on desktop is completely unchanged.
New files
app/src/hooks/use-media-query.ts— lightweightuseMediaQueryhook for responsive layout switchingScreenshots
Desktop: unchanged
Mobile: horizontal bar charts per fixture instead of one tiny grouped chart