fix(frontend): fix spacing and alignment inconsistencies

[tkitsunai]

Summary

Several small styling inconsistencies found while browsing the app:

• Left-align player name text in table row buttons (HistoryRow,
  TopGlobal, TopPlayer, Search, Legend), removing MUI Button's
  default min-width so left-aligned text doesn't leave an awkward
  gap for short names
• Fix uneven top/bottom padding in the page header AppBar (Legend,
  Search, Stats, TopGlobal, TopPlayer) by switching to flex
  centering instead of a fixed paddingTop with no paddingBottom
• Add missing margin between pagination controls and the table, on
  both sides (TopGlobal, TopPlayer, Player match history)
• Vertically align the rank badge, player name, and tags in the
  Player page header by wrapping them in a flex container, and remove
  magic-number top offsets from the platform/global_rank/
  char_rank Typography variants (replaced with vertical-align: middle where the parent isn't a flex container)

Discussion: acceptable trade-off?

Removing min-width from the player-name buttons also shrinks the
clickable/hoverable area for short names down to the text's own
width. The hover style (color etc.) doesn't change, but the hover
area does. Flagging this before merge — is that an acceptable
trade-off?

Test plan

• npm run typecheck — no errors
• npm run check (biome) — no errors
• npm test (vitest) — 82 tests passing
• Manually verified in browser: player name alignment across all
  5 affected pages, AppBar header spacing, pagination margins,
  Player page header layout (including the tag-wrap regression
  found and fixed during review)