fix(sidebar): give Ma musique + Playlists a shared scroll at 1080p

[InstaZDLL]

Summary

Partial fix for #54 — addresses sub-bugs A and B (sidebar usability at 1080p). The "Library crowded", "immersive visualizer overlap" and "README screenshots" parts of #54 remain.

Bug

Reported in #54 (screenshots in the issue):

• Spotify shortcut ON → Playlists section header is visible but every row is clipped: no Liked posts, no Recently played, no real playlist.
• Spotify shortcut OFF → Only one row at a time is reachable; the section is essentially a peephole.

Cause

Sidebar.tsx wrapped Navigation + Ma musique + Playlists in a single flex-1 ... overflow-hidden container. Navigation and Ma musique carried shrink-0, pinning their full 2-row + 5-row heights. Playlists, with flex-1, only got the leftover — and on 1080p with 125 % DPI that leftover is zero or one row, depending on whether the Spotify shortcut is pinned.

Fix

Restructure the sidebar into three zones with one shared scroll boundary:

• Fixed header — brand + profile (unchanged).
• Fixed top nav — Home + Spotify, always reachable in one click.
• Scroll surface — Ma musique + Playlists, sharing the leftover vertical space.

The pinned Liked / Recently-played rows and the real playlist list no longer live in their own nested overflow-y-auto. The outer surface handles everything below the top nav, so the user can simply scroll past Ma musique to reach the playlists when the viewport is short.

On a tall screen nothing changes visually because everything fits.

Test plan

• bun run typecheck
• bun run lint
• Confirm at 1920×1080 with Spotify shortcut ON: Liked / Recently played / playlists reachable via scroll
• At 1920×1080 with Spotify shortcut OFF: same expectation, no truncation
• On a 4K/tall screen: no visible regression (everything fits without scroll)

[coderabbitai]

Warning

Rate limit exceeded

@InstaZDLL has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 15 minutes and 7 seconds before requesting another review.

To continue reviewing without waiting, purchase usage credits in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 81bead80-0011-45b9-a80c-d8618712af62

📥 Commits

Reviewing files that changed from the base of the PR and between 8b2c922 and ccc2e35.

📒 Files selected for processing (1)

• src/components/layout/Sidebar.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/sidebar-1080p

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}