improve responsive styling on library header

This commit is contained in:
jeffvli
2025-11-19 00:07:04 -08:00
parent 62ace421e6
commit cf50132870
3 changed files with 87 additions and 97 deletions
@@ -125,47 +125,45 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
title={detailQuery?.data?.name || ''}
{...background}
>
<Stack gap="lg">
<Pill.Group>
{metadataItems.map(
(item, index) =>
item.value && (
<Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
),
)}
</Pill.Group>
{showRating && (
<Rating
onChange={handleUpdateRating}
readOnly={detailQuery?.isFetching}
value={detailQuery?.data?.userRating || 0}
/>
<Pill.Group>
{metadataItems.map(
(item, index) =>
item.value && (
<Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
),
)}
<Group
gap="md"
mah="4rem"
style={{
overflow: 'hidden',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
}}
>
{detailQuery?.data?.albumArtists.map((artist) => (
<Text
component={Link}
fw={600}
isLink
key={`artist-${artist.id}`}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
variant="subtle"
>
{artist.name}
</Text>
))}
</Group>
</Stack>
</Pill.Group>
{showRating && (
<Rating
onChange={handleUpdateRating}
readOnly={detailQuery?.isFetching}
value={detailQuery?.data?.userRating || 0}
/>
)}
<Group
gap="md"
mah="4rem"
style={{
overflow: 'hidden',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
}}
>
{detailQuery?.data?.albumArtists.map((artist) => (
<Text
component={Link}
fw={600}
isLink
key={`artist-${artist.id}`}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
variant="subtle"
>
{artist.name}
</Text>
))}
</Group>
</LibraryHeader>
</Stack>
);