From 5def79bb02d6a7f976089b6c41d6b483261fc537 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 17 Aug 2026 14:54:39 +0000
Subject: [PATCH] fix: keep the Pokedex arrows still while stepping through

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>
---
 src/data/changelog.js | 12 ++++++++++++
 src/features/Dex.jsx  |  8 ++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/data/changelog.js b/src/data/changelog.js
index 33a106a..fd80424 100644
--- a/src/data/changelog.js
+++ b/src/data/changelog.js
@@ -18,6 +18,18 @@
  */
 
 export const CHANGELOG = [
+  {
+    date: "2026-08-17",
+    title: "The Pokédex arrows stay put",
+    credit: "Spotted by Joseph",
+    intro:
+      "The ◀ and ▶ arrows on the Pokédex used to jump sideways every time you " +
+      "pressed one, because the name box next to them changed width with the " +
+      "name. They've moved to the left of the name box, so now they stay still.",
+    changes: [
+      { kind: "fix", text: "The ◀ and ▶ arrows on the Pokédex don't move any more. Going from Mew to Charizard used to slide them along, so the arrow was never quite where you left your finger. You can hold your place and tap through the whole dex now." },
+    ],
+  },
   {
     date: "2026-08-08",
     title: "A proper Pokédex",
diff --git a/src/features/Dex.jsx b/src/features/Dex.jsx
index 1d59343..31f62f4 100644
--- a/src/features/Dex.jsx
+++ b/src/features/Dex.jsx
@@ -54,11 +54,15 @@ export default function Dex({ focus = null }) {
   return (
     <div>
       <div style={{ display: "flex", gap: 10, alignItems: "flex-end", marginBottom: 16 }}>
+        {/* Arrows first, picker second. The picker is as wide as the name in it,
+            so with the arrows on the right they shifted every time you stepped
+            from a Mew to a Charizard — moving the button out from under the
+            finger that just pressed it. On the left they never move. */}
+        <button className="btn ghost" onClick={() => step(-1)} aria-label="Previous Pokémon">◀</button>
+        <button className="btn ghost" onClick={() => step(1)} aria-label="Next Pokémon">▶</button>
         <Field label="Pokémon">
           <PokemonSelect list={POKEDEX} value={id} onChange={setId} />
         </Field>
-        <button className="btn ghost" onClick={() => step(-1)} aria-label="Previous Pokémon">◀</button>
-        <button className="btn ghost" onClick={() => step(1)} aria-label="Next Pokémon">▶</button>
       </div>
 
       <Hero pokemon={pokemon} species={species} />