From ca7d458f3e52c1ce864dc1d2e0219493cafef418 Mon Sep 17 00:00:00 2001
From: grimsi <9295182+grimsi@users.noreply.github.com>
Date: Sat, 14 Jun 2025 15:34:47 +0200
Subject: [PATCH] Small layout changes to improve visibility on lower
 resolutions (1080p)

---
 .../library/LibraryManagementGames.tsx        | 66 ++++++++++---------
 .../LibraryManagementUnmatchedPaths.tsx       | 30 +++++----
 .../general/modals/EditGameMetadataModal.tsx  | 38 ++++-------
 3 files changed, 64 insertions(+), 70 deletions(-)

diff --git a/gameyfin/src/main/frontend/components/general/library/LibraryManagementGames.tsx b/gameyfin/src/main/frontend/components/general/library/LibraryManagementGames.tsx
index 981a0d4..a0dd2f9 100644
--- a/gameyfin/src/main/frontend/components/general/library/LibraryManagementGames.tsx
+++ b/gameyfin/src/main/frontend/components/general/library/LibraryManagementGames.tsx
@@ -181,38 +181,40 @@ export default function LibraryManagementGames({library}: LibraryManagementGames
                         <TableCell>
                             {item.metadata.path}
                         </TableCell>
-                        <TableCell className="flex flex-row gap-2">
-                            <Button isIconOnly size="sm" onPress={() => toggleMatchConfirmed(item)}>
-                                {item.metadata.matchConfirmed ?
-                                    <Tooltip content="Unconfirm match">
-                                        <CheckCircle weight="fill" className="fill-success"/>
-                                    </Tooltip> :
-                                    <Tooltip content="Confirm match">
-                                        <CheckCircle/>
-                                    </Tooltip>}
-                            </Button>
-                            <Button isIconOnly size="sm" onPress={() => {
-                                setSelectedGame(item);
-                                editGameModal.onOpenChange();
-                            }}>
-                                <Tooltip content="Edit metadata">
-                                    <Pencil/>
-                                </Tooltip>
-                            </Button>
-                            <Button isIconOnly size="sm" onPress={() => {
-                                setSelectedGame(item);
-                                matchGameModal.onOpenChange();
-                            }}>
-                                <Tooltip content="Match game">
-                                    <MagnifyingGlass/>
-                                </Tooltip>
-                            </Button>
-                            <Button isIconOnly size="sm" color="danger"
-                                    onPress={() => deleteGame(item)}>
-                                <Tooltip content="Remove from library">
-                                    <Trash/>
-                                </Tooltip>
-                            </Button>
+                        <TableCell>
+                            <div className="flex flex-row gap-2">
+                                <Button isIconOnly size="sm" onPress={() => toggleMatchConfirmed(item)}>
+                                    {item.metadata.matchConfirmed ?
+                                        <Tooltip content="Unconfirm match">
+                                            <CheckCircle weight="fill" className="fill-success"/>
+                                        </Tooltip> :
+                                        <Tooltip content="Confirm match">
+                                            <CheckCircle/>
+                                        </Tooltip>}
+                                </Button>
+                                <Button isIconOnly size="sm" onPress={() => {
+                                    setSelectedGame(item);
+                                    editGameModal.onOpenChange();
+                                }}>
+                                    <Tooltip content="Edit metadata">
+                                        <Pencil/>
+                                    </Tooltip>
+                                </Button>
+                                <Button isIconOnly size="sm" onPress={() => {
+                                    setSelectedGame(item);
+                                    matchGameModal.onOpenChange();
+                                }}>
+                                    <Tooltip content="Match game">
+                                        <MagnifyingGlass/>
+                                    </Tooltip>
+                                </Button>
+                                <Button isIconOnly size="sm" color="danger"
+                                        onPress={() => deleteGame(item)}>
+                                    <Tooltip content="Remove from library">
+                                        <Trash/>
+                                    </Tooltip>
+                                </Button>
+                            </div>
                         </TableCell>
                     </TableRow>
                 )}
diff --git a/gameyfin/src/main/frontend/components/general/library/LibraryManagementUnmatchedPaths.tsx b/gameyfin/src/main/frontend/components/general/library/LibraryManagementUnmatchedPaths.tsx
index e1afba5..a256b30 100644
--- a/gameyfin/src/main/frontend/components/general/library/LibraryManagementUnmatchedPaths.tsx
+++ b/gameyfin/src/main/frontend/components/general/library/LibraryManagementUnmatchedPaths.tsx
@@ -117,20 +117,22 @@ export default function LibraryManagementUnmatchedPaths({library}: LibraryManage
                         <TableCell>
                             {item.path}
                         </TableCell>
-                        <TableCell className="flex flex-row gap-2">
-                            <Tooltip content="Match game">
-                                <Button isIconOnly size="sm" onPress={() => {
-                                    setSelectedPath(item.path);
-                                    matchGameModal.onOpenChange();
-                                }}>
-                                    <MagnifyingGlass/>
-                                </Button>
-                            </Tooltip>
-                            <Tooltip content="Remove entry from list">
-                                <Button isIconOnly size="sm" color="danger"
-                                        onPress={() => deleteUnmatchedPath(item.path)}><Trash/>
-                                </Button>
-                            </Tooltip>
+                        <TableCell>
+                            <div className="flex flex-row gap-2">
+                                <Tooltip content="Match game">
+                                    <Button isIconOnly size="sm" onPress={() => {
+                                        setSelectedPath(item.path);
+                                        matchGameModal.onOpenChange();
+                                    }}>
+                                        <MagnifyingGlass/>
+                                    </Button>
+                                </Tooltip>
+                                <Tooltip content="Remove entry from list">
+                                    <Button isIconOnly size="sm" color="danger"
+                                            onPress={() => deleteUnmatchedPath(item.path)}><Trash/>
+                                    </Button>
+                                </Tooltip>
+                            </div>
                         </TableCell>
                     </TableRow>
                 )}
diff --git a/gameyfin/src/main/frontend/components/general/modals/EditGameMetadataModal.tsx b/gameyfin/src/main/frontend/components/general/modals/EditGameMetadataModal.tsx
index 6261139..554de6c 100644
--- a/gameyfin/src/main/frontend/components/general/modals/EditGameMetadataModal.tsx
+++ b/gameyfin/src/main/frontend/components/general/modals/EditGameMetadataModal.tsx
@@ -69,32 +69,22 @@ export default function EditGameMetadataModal({game, isOpen, onOpenChange}: Edit
                                         </div>
                                         <TextAreaInput key="summary" name="summary" label="Summary (HTML)"/>
                                         <TextAreaInput key="comment" name="comment" label="Comment (Markdown)"/>
-                                        <Accordion>
+                                        <Accordion variant="splitted"
+                                                   itemClasses={{
+                                                       base: "-mx-2",
+                                                       content: "max-h-80 overflow-y-auto",
+                                                   }}>
                                             <AccordionItem key="additional-metadata"
                                                            aria-label="Additional Metadata"
-                                                           title="Additional Metadata"
-                                                           className="flex flex-col">
-                                                <div className="flex flex-row gap-4">
-                                                    <ArrayInput key="developers" name="developers" label="Developers"/>
-                                                    <div className="w-0 border-s border-foreground/70"/>
-                                                    <ArrayInput key="publishers" name="publishers" label="Publishers"/>
-                                                </div>
-                                                <div className="flex flex-row gap-4">
-                                                    <ArrayInput key="genres" name="genres" label="Genres"/>
-                                                    <div className="w-0 border-s border-foreground/70"/>
-                                                    <ArrayInput key="themes" name="themes" label="Themes"/>
-                                                </div>
-                                                <div className="flex flex-row gap-4">
-                                                    <ArrayInput key="keywords" name="keywords" label="Keywords"/>
-                                                    <div className="w-0 border-s border-foreground/70"/>
-                                                    <ArrayInput key="features" name="features" label="Features"/>
-                                                </div>
-                                                <div className="flex flex-row gap-4">
-                                                    <ArrayInput key="perspectives" name="perspectives"
-                                                                label="Perspectives"/>
-                                                    <div className="w-0 border-s border-foreground/70"/>
-                                                    <div className="flex-1"/>
-                                                </div>
+                                                           title="Additional Metadata">
+                                                <ArrayInput key="developers" name="developers" label="Developers"/>
+                                                <ArrayInput key="publishers" name="publishers" label="Publishers"/>
+                                                <ArrayInput key="genres" name="genres" label="Genres"/>
+                                                <ArrayInput key="themes" name="themes" label="Themes"/>
+                                                <ArrayInput key="keywords" name="keywords" label="Keywords"/>
+                                                <ArrayInput key="features" name="features" label="Features"/>
+                                                <ArrayInput key="perspectives" name="perspectives"
+                                                            label="Perspectives"/>
                                             </AccordionItem>
                                         </Accordion>
                                     </ModalBody>