From dd64713448cee4f1582d3e8d7ff1c1c82536ec98 Mon Sep 17 00:00:00 2001
From: grimsi <9295182+grimsi@users.noreply.github.com>
Date: Sat, 14 Jun 2025 13:20:50 +0200
Subject: [PATCH] Improve UI

---
 .../general/modals/GameCoverPickerModal.tsx   | 40 ++++++++++++-------
 gameyfin/tailwind.config.ts                   |  3 +-
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/gameyfin/src/main/frontend/components/general/modals/GameCoverPickerModal.tsx b/gameyfin/src/main/frontend/components/general/modals/GameCoverPickerModal.tsx
index 2fdd7fc..2508d01 100644
--- a/gameyfin/src/main/frontend/components/general/modals/GameCoverPickerModal.tsx
+++ b/gameyfin/src/main/frontend/components/general/modals/GameCoverPickerModal.tsx
@@ -71,22 +71,34 @@ export function GameCoverPickerModal({game, isOpen, onOpenChange, setCoverUrl}:
                                     <MagnifyingGlass/>
                                 </Button>
                             </div>
+                            {searchResults.length === 0 && !isSearching &&
+                                <p className="text-center">No results found.</p>
+                            }
+                            {searchResults.length === 0 && isSearching &&
+                                <p className="text-center text-foreground/70">Searching...</p>
+                            }
                             <ScrollShadow
-                                className="flex flex-row flex-wrap gap-4 h-96 overflow-scroll justify-evenly">
-                                {searchResults.length === 0 && "No results found."}
+                                className="grid grid-cols-auto-fill gap-4 h-96 overflow-scroll justify-evenly">
                                 {searchResults.map((result) => (
-                                    <Image
-                                        key={result.id}
-                                        alt={result.title}
-                                        className="z-0 object-cover aspect-[12/17] cursor-pointer"
-                                        src={result.coverUrl!}
-                                        radius="none"
-                                        height={216}
-                                        onClick={() => {
-                                            setCoverUrl(result.coverUrl!);
-                                            onClose();
-                                        }}
-                                    />
+                                    <div className="relative group w-fit h-fit cursor-pointer"
+                                         onClick={() => {
+                                             setCoverUrl(result.coverUrl!);
+                                             onClose();
+                                         }}>
+                                        <Image
+                                            key={result.id}
+                                            alt={result.title}
+                                            className="z-0 object-cover aspect-[12/17] group-hover:brightness-50"
+                                            src={result.coverUrl!}
+                                            radius="none"
+                                            height={216}
+                                        />
+                                        <div
+                                            className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100"
+                                        >
+                                            <ArrowRight size={46}/>
+                                        </div>
+                                    </div>
                                 ))}
                             </ScrollShadow>
                         </ModalBody>
diff --git a/gameyfin/tailwind.config.ts b/gameyfin/tailwind.config.ts
index 8326144..1b6ed08 100644
--- a/gameyfin/tailwind.config.ts
+++ b/gameyfin/tailwind.config.ts
@@ -17,7 +17,8 @@ export default withMT({
                 'gf-secondary': '#6441a5'
             },
             gridTemplateColumns: {
-                '300px': 'repeat(auto-fit, 300px)'
+                '300px': 'repeat(auto-fit, 300px)',
+                'auto-fill': 'repeat(auto-fill, minmax(150px, 1fr))',
             }
         }
     },