Fix songbook transpose readout width collapsing mobile controls bar (#5999)

[atomantic]

Summary

The Transpose live-region in SongBookViewer rendered the full 21-character sentence (Transpose +1 semitones) visibly, expanding to ~176px inside a min-w-[3.5rem] box and forcing the mobile (375px) controls bar into 4–5 wrapped rows. The visible readout now renders only the numeric offset (0, +1, -2) while the words "Transpose"/"semitones" move into sr-only child spans, so the control fits inline and the role="status" element's textContent still reads Transpose 0 semitones for assistive tech and existing tests.

One deviation from the issue's suggested snippet: the numeric span intentionally has no aria-hidden — hiding it would drop the number from the accessible name under aria-atomic="true", so screen readers would announce only "Transpose semitones". Keeping it in the tree preserves the full announcement and the same textContent.

Test plan

• cd client && npx vitest run src/pages/SongBookViewer.test.jsx — 66/66 pass, including the existing live-region assertions (textContent === 'Transpose 0 semitones' / 'Transpose +1 semitones') and a new assertion that the visible non-sr-only span renders the numeric offset (0).
• Local reviewer mtplx (low effort, 1 round): raised the aria-hidden announcement gap above; addressed, re-tested green.

Closes #5999