Redesign top bar with dedicated round badge and centered combatant name

Replace the combined "Round N — Name" string with a three-zone flex layout:
left (prev button + R{n} pill badge), center (prominent combatant name with
truncation), right (action buttons + next button). Adds 13 unit tests
covering all user stories including layout robustness and empty state.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-11 12:39:57 +01:00
parent 55d322a727
commit 95cb2edc23
10 changed files with 703 additions and 21 deletions

View File

@@ -85,6 +85,7 @@ The constitution (`.specify/memory/constitution.md`) governs all feature work:
- N/A (no persistence changes — confirm state is ephemeral) (032-inline-confirm-buttons)
- TypeScript 5.8, CSS (Tailwind CSS v4) + React 19, Tailwind CSS v4 (033-fix-concentration-glow-clip)
- N/A (no persistence changes) (033-fix-concentration-glow-clip)
- N/A (no persistence changes — display-only refactor) (034-topbar-redesign)
## Recent Changes
- 032-inline-confirm-buttons: Added TypeScript 5.8 (strict mode, `verbatimModuleSyntax`) + React 19, Tailwind CSS v4, Lucide React, class-variance-authority (cva)