fix(ui): cap grid item width on wide screens

[InstaZDLL]

Summary

On widescreen monitors (>1920px), the HomeView / LibraryView / ArtistDetailView grids were stretching cover art to ~330px square — way bigger than the Spotify / Apple Music reference. The grids capped at `lg:grid-cols-5` or `lg:grid-cols-6` and then let each cell expand to fill the remaining width, instead of growing the column count.

Switch to CSS Grid `auto-fill` with a `minmax(N, 1fr)` so items stay 160-220px regardless of viewport width and the column count naturally grows with screen size.

View	Old breakpoints	New
HomeView recently played / added	`grid-cols-2 sm:3 md:4 lg:6`	`auto-fill minmax(160px, 1fr)`
LibraryView albums / artists	`grid-cols-2 sm:3 md:4 lg:5` (gap-5)	`auto-fill minmax(180px, 1fr)`
LibraryView genres	`grid-cols-2 sm:3 md:4` (gap-4)	`auto-fill minmax(180px, 1fr)`
ArtistDetailView similar / discography	mix of lg:5 / lg:6	`auto-fill minmax(160/180px, 1fr)`

Test plan

• 1920×1080 (typical desktop): grid shows ~10-12 columns, covers around 160-180px
• 1366×768 (laptop): grid shows ~7-8 columns
• 768px (tablet): grid shows ~4 columns
• 360px (mobile): grid shows 2 columns
• Spot-check HomeView with empty recently-played → empty state still renders correctly
• Spot-check LibraryView with <5 items → still left-aligned, no awkward stretching

Summary by CodeRabbit

• Style
  • Improved responsive grid layouts across the app for better content display on different screen sizes, including adjustments to album and artist grids in the artist detail view, recently played and added sections in the home view, and album, artist, and genre grids in the library view.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR standardizes responsive grid layouts across the application by converting fixed Tailwind breakpoint-based column definitions to auto-filling CSS grid layouts using repeat(auto-fill, minmax(...)) in ArtistDetailView, HomeView, and LibraryView components.

Changes

Responsive Grid Layout Refactoring

Layer / File(s)	Summary
ArtistDetailView grid layouts src/components/views/ArtistDetailView.tsx	Similar artists and discography grid containers switch from breakpoint-based columns to auto-fill minmax layout.
HomeView carousel grid layouts src/components/views/HomeView.tsx	Recently played and recently added carousel grids convert to auto-fill minmax(160px, 1fr) responsive layout.
LibraryView tab grid layouts src/components/views/LibraryView.tsx	Album, artist, and genre list grids adopt unified auto-fill minmax(180px, 1fr) layout across all three tabs.

Estimated Code Review Effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A grid reflow, from points to flow,
Breakpoints break, and cards now grow,
Auto-fill spreads left and right,
Minmax dances—responsive delight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(ui): cap grid item width on wide screens' is fully related to and clearly summarizes the main change: replacing fixed grid column breakpoints with auto-fill responsive layouts to prevent oversized items on wide screens.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description comprehensively covers the changes, testing approach, and rationale for switching from fixed breakpoint-based grids to auto-fill responsive layouts.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/grid-overflow-widescreen

---

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