From 725e44f04894ab54599d23351c1043ce63dd1d5a Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 19 Nov 2025 02:52:35 -0800
Subject: [PATCH] adjust genre display and gap in header

---
 .../albums/components/album-detail-header.tsx | 25 +++++++++----------
 .../components/library-header.module.css      |  4 +--
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx
index 213341dc8..67107207d 100644
--- a/src/renderer/features/albums/components/album-detail-header.tsx
+++ b/src/renderer/features/albums/components/album-detail-header.tsx
@@ -12,9 +12,8 @@ import { useCurrentServer } from '/@/renderer/store';
 import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils';
 import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
-import { Button } from '/@/shared/components/button/button';
 import { Group } from '/@/shared/components/group/group';
-import { Pill } from '/@/shared/components/pill/pill';
+import { Pill, PillLink } from '/@/shared/components/pill/pill';
 import { Rating } from '/@/shared/components/rating/rating';
 import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
@@ -147,34 +146,33 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
                         {metadataItems.map(
                             (item, index) =>
                                 item.value && (
-                                    <Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
+                                    <Pill key={`item-${item.id}-${index}`} size="md">
+                                        {item.value}
+                                    </Pill>
                                 ),
                         )}
                     </Pill.Group>
                     {showGenres && (
-                        <Group gap="sm">
+                        <Pill.Group>
                             {detailQuery?.data?.genres?.map((genre) => (
-                                <Button
-                                    component={Link}
+                                <PillLink
                                     key={`genre-${genre.id}`}
-                                    radius="md"
-                                    size="compact-md"
+                                    size="md"
                                     to={generatePath(genreRoute, {
                                         genreId: genre.id,
                                     })}
-                                    variant="outline"
                                 >
                                     {genre.name}
-                                </Button>
+                                </PillLink>
                             ))}
-                        </Group>
+                        </Pill.Group>
                     )}
-                    <Group align="center" gap="sm">
+                    <Group align="center" gap="xs">
                         <ActionIcon
                             icon="favorite"
                             iconProps={{
                                 fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
-                                size: 'lg',
+                                size: 'md',
                             }}
                             onClick={handleFavorite}
                             size="xs"
@@ -184,6 +182,7 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
                             <Rating
                                 onChange={handleUpdateRating}
                                 readOnly={detailQuery?.isFetching}
+                                size="md"
                                 styles={{
                                     input: {
                                         background: 'transparent',
diff --git a/src/renderer/features/shared/components/library-header.module.css b/src/renderer/features/shared/components/library-header.module.css
index c8370404e..361b9dc2a 100644
--- a/src/renderer/features/shared/components/library-header.module.css
+++ b/src/renderer/features/shared/components/library-header.module.css
@@ -4,7 +4,7 @@
     grid-template-areas: 'image' 'info';
     grid-template-rows: auto 1fr;
     grid-template-columns: 1fr;
-    gap: 1rem;
+    gap: var(--theme-spacing-md);
     align-items: center;
     justify-items: center;
     width: 100%;
@@ -78,7 +78,7 @@
     display: flex;
     flex-direction: column;
     grid-area: info;
-    gap: var(--theme-spacing-md);
+    gap: var(--theme-spacing-sm);
     align-items: center;
     justify-content: center;
     width: 100%;