From da4b88fc14274c5510319394ef0f111b144cc542 Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Wed, 1 Apr 2026 16:34:49 +0200
Subject: [PATCH] fix(web): transition bg and border-radius (#27438)

* fix(web): transition bg and border-radius

* also transition thumb
---
 .../assets/thumbnail/thumbnail.svelte          | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 64b5a835ed..f7b9020d98 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -208,7 +208,11 @@
 </script>
 
 <div
-  class={['group focus-visible:outline-none flex overflow-hidden', backgroundColorClass, { 'rounded-xl': selected }]}
+  class={[
+    'group focus-visible:outline-none flex overflow-hidden transition-[background-color,border-radius]',
+    backgroundColorClass,
+    { 'rounded-xl': selected },
+  ]}
   style:width="{width}px"
   style:height="{height}px"
   onmouseenter={onMouseEnter}
@@ -248,8 +252,16 @@
       ]}
     >
       <ImageThumbnail
-        class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
-        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]}
+        class={[
+          'absolute group-focus-visible:rounded-lg transition-[border-radius]',
+          { 'rounded-xl': selected },
+          imageClass,
+        ]}
+        brokenAssetClass={[
+          'z-1 absolute group-focus-visible:rounded-lg transition-[border-radius]',
+          { 'rounded-xl': selected },
+          brokenAssetClass,
+        ]}
         url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
         altText={$getAltText(asset)}
         widthStyle="{width}px"