fix: keep the Pokédex arrows still while stepping through

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",

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} />