From 36c44a19ab5e26258950e9ba6ae76feeb7c33b20 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Fri, 15 May 2026 21:46:01 +0200
Subject: [PATCH] fix(ui): cap grid item width on wide screens (auto-fill
 instead of fixed cols)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The recently-played / recently-added / library / artist grids capped
at lg:grid-cols-5 or lg:grid-cols-6 and then let each cell stretch to
fill the remaining width. On a 2000px+ viewport that pushed cover
art to ~330px square — way larger than any Spotify / Apple Music
reference. Swap to grid-cols-[repeat(auto-fill,minmax(N,1fr))] so
items stay 160-220px wide and the column count grows with viewport.

- HomeView Recently played + Recently added: minmax(160px, 1fr)
- LibraryView albums + artists + genres: minmax(180px, 1fr)
- ArtistDetailView discography + similar artists: minmax(180px / 160px, 1fr)
---
 src/components/views/ArtistDetailView.tsx | 4 ++--
 src/components/views/HomeView.tsx         | 4 ++--
 src/components/views/LibraryView.tsx      | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/views/ArtistDetailView.tsx b/src/components/views/ArtistDetailView.tsx
index 25b9018..43463fe 100644
--- a/src/components/views/ArtistDetailView.tsx
+++ b/src/components/views/ArtistDetailView.tsx
@@ -339,7 +339,7 @@ export function ArtistDetailView({
           <h2 className="text-[10px] font-bold tracking-widest text-zinc-400 uppercase px-1">
             {t("artistDetail.similar.title")}
           </h2>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
             {similar.map((s) => {
               const inLibrary = s.library_artist_id != null;
               const imgSrc = resolveRemoteImage(s.picture_path, s.picture_url);
@@ -399,7 +399,7 @@ export function ArtistDetailView({
           <h2 className="text-[10px] font-bold tracking-widest text-zinc-400 uppercase px-1">
             {t("artistDetail.discography")}
           </h2>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-5">
             {artist.albums.map((album) => (
               <button
                 key={album.id}
diff --git a/src/components/views/HomeView.tsx b/src/components/views/HomeView.tsx
index 0beda48..7afda32 100644
--- a/src/components/views/HomeView.tsx
+++ b/src/components/views/HomeView.tsx
@@ -516,7 +516,7 @@ export function HomeView({
             </EmptyState>
           </div>
         ) : (
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
             {recentPlays.map((play, idx) => {
               const isCurrent = play.track_id === currentTrack?.id;
               return (
@@ -583,7 +583,7 @@ export function HomeView({
               {t("home.seeAll")}
             </button>
           </div>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
             {recentAlbums.map((album) => (
               <button
                 key={album.id}
diff --git a/src/components/views/LibraryView.tsx b/src/components/views/LibraryView.tsx
index 864eb1f..de23687 100644
--- a/src/components/views/LibraryView.tsx
+++ b/src/components/views/LibraryView.tsx
@@ -1351,7 +1351,7 @@ function AlbumGrid({
   return (
     <>
       <div
-        className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5 ${
+        className={`grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-5 ${
           isLoading ? "opacity-50" : ""
         }`}
       >
@@ -1511,7 +1511,7 @@ function ArtistList({
   return (
     <div
       ref={gridRef}
-      className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5 ${
+      className={`grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-5 ${
         isLoading ? "opacity-50" : ""
       }`}
     >
@@ -1609,7 +1609,7 @@ interface GenreListProps {
 function GenreList({ genres, isLoading, t }: GenreListProps) {
   return (
     <div
-      className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 ${
+      className={`grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4 ${
         isLoading ? "opacity-50" : ""
       }`}
     >