From fe1c87c190eff85271b16525327599adb204d356 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Deluan=20Quint=C3=A3o?= <deluan@navidrome.org>
Date: Wed, 9 Sep 2026 10:52:15 -0400
Subject: [PATCH] fix(ui): round the album grid hover overlay in the Nautiline
 theme (#6115)

The theme rounded the cover image directly and set a border radius on
albumContainer, which has no background or clipping, so it rounded
nothing. The hover overlay is a sibling of the image inside the same
link, so it kept square corners that poked out over the rounded cover.

Move the radius to that link and clip it, so both the image and the
overlay follow the same rounded box. This also covers the mobile bar,
which is always visible.

Fixes #6110
---
 ui/src/themes/nautiline.js  |  6 ++----
 ui/src/themes/theme.test.js | 22 ++++++++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

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')
+    },
+  )
+})