Repository navigation
fix: keep the Pokédex arrows still while stepping through - #13
Merged
Merged
Conversation
The picker is as wide as the name inside it, so with the arrows sitting to its right they moved every time the name length changed. Stepping Ivysaur -> Venusaur -> Charmander slid them across four different positions, which on a tablet means the button is no longer under the finger that just pressed it. Arrows now come first in the row, so they are anchored to the left edge and the picker grows to the right instead. Measured in a browser across eight Pokemon: before, the arrows occupied four distinct x positions; after, one. Spotted by Joseph. Co-authored-by: Claude <noreply@anthropic.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
2 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.
Spotted by Joseph: the ◀ ▶ arrows on the Pokédex move when you press them.
Cause
The row was
[picker] [◀] [▶]. The picker is a shrink-wrapped flex item, so it is exactly as wide as the name inside it — and the arrows sit after it in the flow. Every time the name length changed, the arrows slid sideways. On a tablet that means the button is no longer under the finger that just pressed it, which is precisely the button you want to press again.Fix
The arrows now come first in the row, anchored to the left edge, and the picker grows to the right instead. One-line reorder in
src/features/Dex.jsx, plus a comment saying why the order matters so it doesn't get tidied back.Verification
Driven in a real browser (Chromium), stepping through eight Pokémon and measuring the arrows' actual x position each time:
144.8,152.7,160.5,168.3192.6,200.4,208.2,216.04895.7The "before" numbers were captured by stashing the fix and re-running the same script, so the bug is confirmed rather than assumed.
Also:
npm run test:run(353 tests, 8 files) andnpm run buildboth green.Changelog
New top entry dated 2026-08-17, credited to Joseph. Note this moves the version stamp attached to bug reports.
Generated by Claude Code