diff --git a/src/renderer/features/artists/components/album-artist-detail-content.module.css b/src/renderer/features/artists/components/album-artist-detail-content.module.css
index dd046e398..1c509b051 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.module.css
+++ b/src/renderer/features/artists/components/album-artist-detail-content.module.css
@@ -47,5 +47,4 @@
align-items: center;
width: 100%;
min-width: 0;
- margin-bottom: var(--theme-spacing-md);
}
diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx
index bca49ade4..e3df2779f 100644
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@@ -691,12 +691,19 @@ interface AlbumSectionProps {
title: React.ReactNode | string;
}
+const MAX_SECTION_CARDS = 20;
+
const AlbumSection = ({ albums, controls, cq, rows, title }: AlbumSectionProps) => {
+ const { t } = useTranslation();
const span = cq.isXl ? 3 : cq.isLg ? 4 : cq.isMd ? 6 : cq.isSm ? 8 : cq.isXs ? 12 : 12;
const albumCount = albums.length;
+ const [showAll, setShowAll] = useState(false);
const player = usePlayer();
const serverId = useCurrentServerId();
+ const displayedAlbums = showAll ? albums : albums.slice(0, MAX_SECTION_CARDS);
+ const hasMoreAlbums = albums.length > MAX_SECTION_CARDS;
+
const handlePlay = useCallback(
(playType: Play) => {
if (albums.length === 0) return;
@@ -787,7 +794,7 @@ const AlbumSection = ({ albums, controls, cq, rows, title }: AlbumSectionProps)
- {albums.map((album) => (
+ {displayedAlbums.map((album) => (
))}
+ {hasMoreAlbums && !showAll && (
+
+
+
+ )}
);
};