fix(desktop): prevent responsive titlebar overlap

[Nordwyn]

Summary

Keep Canopy's media information inside its titlebar readout when desktop windows become narrow. Prevent scrolled page content from showing behind the sticky back button and page title.

Root cause

The readout's nested copy grid uses an implicit auto column, whose intrinsic minimum can exceed the space allocated by the outer grid. Bitrate and quality labels also cannot shrink. Separately, the sticky page header has a transparent background.

Changes

• Bound the copy grid with minmax(0, 1fr) so the existing text ellipsis can work.
• Allow bitrate/quality labels to shrink and truncate; contain metadata overflow at tight widths.
• Use the existing Canopy chrome surface behind the sticky header.

Only src/styles/layout-canopy.css changes. Existing responsive control visibility and breakpoints are preserved.

Testing

• npm run build:frontend: passed.
• git diff --check: passed.
• Targeted navigation, Canopy upgrade, playback-control, and queue-layout tests: 38 passed.
• npm test: 627 passed, 12 failed, 1 skipped. The same 12 failures reproduce on the unmodified baseline; they are in native audio analysis, Windows media integration, and build-mode tests.
• Playwright/Chromium: 240 rendered combinations across Canopy/Grove and renderer native/custom titlebar modes. Canopy containment was checked with ordinary, long, missing-quality, and empty-track metadata, including explicit and Qobuz Hi-Res labels.
• Viewports covered normal desktop, laptop, 480×520 narrow windows, 520 px short windows, and both sides of the 1180/900/620 px breakpoints.
• Checked history-page scrolling in dark/OLED/light themes with immersive artwork on/off, queue and playback-options menus, title keyboard focus, and Back navigation after scrolling. Normal-desktop chrome geometry was compared with the original CSS.
• Artist/album detail scrolling and Back navigation: 20 cases passed across Canopy/Grove and five desktop/narrow/short viewports.
• Actual Electron 43.7.0 main process and renderer on Windows: seven exact content sizes passed, including 480×520 and the 620 px boundary; sticky-header coverage and back-button hit testing passed at 800×600.

Browser checks use synthetic data and mocked backend/artwork responses. Electron uses synthetic data in a hidden window with an isolated profile. Visible OS chrome, authenticated playback, native audio/media integration, and macOS/Linux remain untested. Native addons are absent in this checkout. No app console errors occurred in the final browser runs; Chromium emitted WebGL driver performance warnings.

Fixes #136

[SFG5453]

Thanks for the PR! I’m in the middle of rewriting the client, so this part of the codebase is being replaced and I can’t really accept changes against the current implementation anymore. Going to close this, but I appreciate the work and testing you put into it.