diff --git a/ui/src/themes/nautiline.js b/ui/src/themes/nautiline.js index 0c13dc0ec..9194ad7a0 100644 --- a/ui/src/themes/nautiline.js +++ b/ui/src/themes/nautiline.js @@ -598,11 +598,9 @@ const NautilineTheme = { }, }, NDAlbumGridView: { - albumContainer: { + link: { borderRadius: radii.md, - '& img': { - borderRadius: radii.md, - }, + overflow: 'hidden', }, albumTitle: { fontWeight: 600, diff --git a/ui/src/themes/theme.test.js b/ui/src/themes/theme.test.js index b65c3a5fe..a015ae696 100644 --- a/ui/src/themes/theme.test.js +++ b/ui/src/themes/theme.test.js @@ -12,3 +12,25 @@ describe('NDPlaylistDetails styles', () => { }, ) }) + +describe('NDAlbumGridView styles', () => { + const themeEntries = Object.entries(themes) + + // The hover overlay is a sibling of the image, so it keeps square corners. + it.each(themeEntries)( + '%s should not round the grid cover image on its own', + (themeName, theme) => { + const container = theme.overrides?.NDAlbumGridView?.albumContainer + expect(container?.['& img']?.borderRadius).toBeUndefined() + }, + ) + + it.each(themeEntries)( + '%s should clip the grid cover link when it is rounded', + (themeName, theme) => { + const link = theme.overrides?.NDAlbumGridView?.link + if (!link?.borderRadius) return + expect(link.overflow).toBe('hidden') + }, + ) +})