The phase track (BEGIN · MAIN 1 · COMBAT · END) was losing labels to
ellipsis on narrow top bars, and the primary action buttons were
clipping "NEXT PHASE"/"NEXT TURN" because they had white-space: nowrap
and a fixed height.
.phase-step:
- tighter padding (1px 5px) and gap (2px)
- no letter-spacing, smaller border-radius, flex-shrink: 1 so pills
compress uniformly when the top bar is crowded
- merged duplicate .phase-step.active rule and made it bolder so the
active step still reads well after the shrink
.btn-phase (NEXT PHASE / NEXT TURN):
- white-space: normal + word-break: break-word enable two-line wrap
- height: auto + min-height: 34px lets the label breathe inside
the 44px top bar
- min-width: 64px / max-width: 80px keeps the buttons square-ish
- display: flex centers the wrapped text vertically & horizontally
- align-items: stretch on .top-bar-actions so both buttons match
the tallest sibling's height
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
