dostulata/initiative
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign top bar with dedicated round and turn fields #4

New Issue
Closed
opened 2026-03-11 11:19:11 +01:00 by dostulata · 0 comments
dostulata commented 2026-03-11 11:19:11 +01:00
Owner
Copy Link

Summary

Redesign the encounter top bar to replace the single "Round 1 — Conjurer" status string with dedicated, separately styled fields for round number and current combatant. This gives the bar a cleaner left-center-right layout that's easier to scan and feels more modern.

Acceptance Criteria

Scanning Round and Combatant at a Glance

  • Round number appears as a muted badge/pill on the left side, combatant name appears as a prominent centered label — displayed as separate visual elements
  • Round badge updates when the round increments without layout shift

Consistent Left-Center-Right Layout

  • Layout maintains left-center-right structure with the name centered regardless of name length
  • Long combatant names truncate gracefully without pushing action buttons off-screen
  • All three zones (round badge, combatant name, action buttons) remain visible on narrow viewports

No Combatants State

  • With no combatants, the round badge still shows the round number and the center area displays a placeholder message

Edge Cases

  • Extremely long combatant names (50+ characters) truncate with an ellipsis
  • Transitioning between combatants updates immediately with no blank intermediate state
  • On very narrow viewports, the round badge and action buttons remain visible; the combatant name may truncate
## Summary Redesign the encounter top bar to replace the single "Round 1 — Conjurer" status string with dedicated, separately styled fields for round number and current combatant. This gives the bar a cleaner left-center-right layout that's easier to scan and feels more modern. ## Acceptance Criteria ### Scanning Round and Combatant at a Glance - [x] Round number appears as a muted badge/pill on the left side, combatant name appears as a prominent centered label — displayed as separate visual elements - [x] Round badge updates when the round increments without layout shift ### Consistent Left-Center-Right Layout - [x] Layout maintains left-center-right structure with the name centered regardless of name length - [x] Long combatant names truncate gracefully without pushing action buttons off-screen - [x] All three zones (round badge, combatant name, action buttons) remain visible on narrow viewports ### No Combatants State - [x] With no combatants, the round badge still shows the round number and the center area displays a placeholder message ### Edge Cases - [x] Extremely long combatant names (50+ characters) truncate with an ellipsis - [x] Transitioning between combatants updates immediately with no blank intermediate state - [x] On very narrow viewports, the round badge and action buttons remain visible; the combatant name may truncate
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
dostulata
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: dostulata/initiative#4
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?