v6: Vertically center the KeycapHint glyph (#4400)

## Summary

- The glyph inside a `KeycapHint` key (`⌘`, `⌃`, `⌥`, `⇧`, `⏎`, letters)
sat slightly above center. Centering the line box wasn't enough by
itself, since these glyphs carry more ink above the baseline than below
it.
- The glyph now renders in its own span with a small `translateY` nudge,
measured against each glyph's actual ink bounds rather than guessed. `⌃`
needed the most help; the rest were already close.

## Test plan

- [ ] Open GraphiQL, look at a keycap hint in the top bar (e.g. the `⌘`
`⏎` run shortcut), and confirm the glyph is vertically centered on the
key.
- [ ] In Storybook, view `Primitives/KeycapHint` (Single,
ChordWithModifier, RunShortcut stories) in both dark and light theme and
confirm centering holds across the different glyphs.

Refs: #4219

Author: trevor-scheer

.changeset/keycap-hint-vertical-center.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Vertically center the glyph inside `KeycapHint` keys.

packages/graphiql-react/src/components/keycap-hint/index.css

@@ -20,3 +20,9 @@
   font-weight: 600;
   line-height: 1;
 }
+
+.graphiql-keycap-glyph {
+  /* The glyphs' ink sits slightly above the vertical center of their em
+     box, so centering the line box alone isn't quite enough. */
+  transform: translateY(0.05em);
+}

packages/graphiql-react/src/components/keycap-hint/index.tsx

@@ -45,7 +45,7 @@ export const KeycapHint: FC<KeycapHintProps> = ({ keys, ariaLabel }) => {
     <span className="graphiql-keycap-hint" aria-label={ariaLabel}>
       {keys.map((k, i) => (
         <kbd key={`${k}-${i}`} className="graphiql-keycap">
-          {display[k] ?? k}
+          <span className="graphiql-keycap-glyph">{display[k] ?? k}</span>
         </kbd>
       ))}
     </span>