diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx index 48b154bb..d75216ee 100644 --- a/src/renderer/features/albums/components/album-detail-content.tsx +++ b/src/renderer/features/albums/components/album-detail-content.tsx @@ -1,7 +1,7 @@ import { MutableRefObject, useCallback, useMemo } from 'react'; import { RowDoubleClickedEvent, RowHeightParams, RowNode } from '@ag-grid-community/core'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; -import { Box, Group, Spoiler, Stack } from '@mantine/core'; +import { Box, Group, Stack } from '@mantine/core'; import { useSetState } from '@mantine/hooks'; import { useTranslation } from 'react-i18next'; import { FaLastfmSquare } from 'react-icons/fa'; @@ -12,7 +12,7 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import { queryKeys } from '/@/renderer/api/query-keys'; import { AlbumListSort, LibraryItem, QueueSong, SortOrder } from '/@/renderer/api/types'; -import { Button, Popover } from '/@/renderer/components'; +import { Button, Popover, Spoiler } from '/@/renderer/components'; import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel'; import { TableConfigDropdown, @@ -58,6 +58,7 @@ const ContentContainer = styled.div` const DetailContainer = styled.div` display: flex; flex-direction: column; + gap: 2rem; padding: 1rem 2rem 5rem; overflow: hidden; `; @@ -328,7 +329,6 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP @@ -380,10 +380,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP {showGenres && ( - + {detailQuery?.data?.genres?.map((genre) => ( - - - - + + handlePlay(playButtonBehavior)} /> + - + + + + + {showGenres ? ( @@ -418,11 +415,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten ) : null} {externalLinks ? ( - +