Home

dev / openkara

publicthedavidweng/OpenKara· sync paused
Overview Code History Branches Pull requestsIssuesInsights
main
HomeOverview Code PRsIssues

feat(lyrics): add fullscreen lyric alignment toggle and fix audience truncation

2 months ago

dd06e48
Authored
Davy7/29/2026, 5:19:07 AM
Move lyric alignment state into LyricsStore so both the main window and the
fullscreen audience window can toggle it. In audience left-aligned mode the
lyrics now fill the padded viewport instead of clamping to 92vw/1600px, which
removes the large black side bars and gives long lines enough room to wrap.

Switched the left-aligned audience grid to `1fr auto` so the primary lyric
column takes the remaining width and the romanization column sizes to its
content. Added `min-w-0 break-words` to the primary lyric and background word
spans so they wrap instead of overflowing. Disabled the active-line scale for
left-aligned audience to prevent the scaled line from overflowing the stage
clipping bounds.

Added an alignment toggle button to FullscreenControls next to the romanize
button, using AlignLeft/AlignCenter icons. Updated tests and mocks to include
the new LyricsStore state.

Also includes the previously uncommitted Edit Lyrics dialog sizing, z-index,
and backdrop opacity fixes.

Parenta96c343

8 files changed
  • src/components/Lyrics/LyricLine.tsx+293−216
  • src/components/Lyrics/LyricsEditDialog.tsx+4−4
  • src/components/Lyrics/LyricsPanel.test.tsx+5−1
  • src/components/Lyrics/LyricsPanel.tsx+37−2
  • src/components/Player/FullscreenControls.test.tsx+13−2
  • src/components/Player/FullscreenControls.tsx+37−2
  • src/stores/lyrics-store.test.ts+1−0
  • src/stores/lyrics-store.ts
+11
−0