fix(layout): tighten chrome density for 1080p#65
Conversation
Sub-bug D from #54: the Library view felt crowded at 1920x1080, especially with the side lyrics panel open. The hero blocks were sized for a 4K display — once the main column dropped to ~600 px the album title truncated mid-word and the page felt top-heavy. Three coordinated trims, no grammar change to the design language: - **TopBar**: `h-20 px-8` to `h-16 px-6`. Saves 16 px of vertical chrome above every view; the search bar still has comfortable touch targets. - **LibraryView hero**: `space-y-8 pb-20` to `space-y-6 pb-12`; icon tile `w-24 h-24` (Music2 size=48) to `w-20 h-20` (size=40); title responsive `text-3xl md:text-4xl` so 1080p doesn't get the 4K size; action button padding `px-4 py-2.5` to `px-4 py-2`. - **AlbumDetailView hero**: `space-y-8 pb-20` to `space-y-6 pb-12`; cover `w-48 h-48` to `w-44 h-44` and gap to it from `space-x-8` to `space-x-6`; title `text-4xl ... truncate` to `text-3xl md:text-4xl ... line-clamp-2` so long names wrap into a second line instead of ellipsizing when the lyrics panel is open; action button padding `px-5 py-2.5` to `px-4 py-2`, and the row flips to `flex-wrap gap-2` so the three buttons wrap rather than overflow. Net effect on a 1080p / 125 % DPI viewport: the album hero loses about 60 px of vertical bulk and the title is readable on two lines when the lyrics panel takes part of the width. 4K screens see a slightly more compact hero — still clearly the page anchor.
|
Warning Rate limit exceeded
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 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 configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (3)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
github-actions
Bot
added
scope: frontend
1 participant
Summary
Sub-bug D of #54: the Library view (Album Detail in particular) felt crowded at 1920×1080, especially with the side lyrics panel open. The hero blocks were dimensioned for 4K — once the main column dropped to ~600 px the album title truncated mid-word and the page felt top-heavy.
What changed
Three coordinated trims; no grammar change to the design language.
h-20 px-8h-16 px-6space-y-8 pb-20, iconw-24 h-24(size=48), titletext-4xl mb-2, buttonpx-4 py-2.5space-y-6 pb-12, iconw-20 h-20(size=40), titletext-3xl md:text-4xl mb-1, buttonpx-4 py-2space-y-8 pb-20, coverw-48 h-48,space-x-8, titletext-4xl truncate, three buttonspx-5 py-2.5no wrapspace-y-6 pb-12, coverw-44 h-44,space-x-6, titletext-3xl md:text-4xl line-clamp-2, buttonspx-4 py-2withflex-wrap gap-2Net effect
On a 1080p / 125 % DPI viewport:
On a 4K / 100 % DPI display the heroes are very slightly more compact but still clearly the page anchor — the responsive
md:text-4xlkeeps the title at its original size on wide viewports.Test plan
bun run typecheckbun run linttext-4xlRelated
Closes sub-bug D of #54. Sub-bug E (README screenshots) is the only piece of #54 still pending.