From 4fd58885e27ae69a058748507e22fb0f774535ab Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Thu, 9 Jul 2026 12:39:12 +0200
Subject: [PATCH] fix(web): recursively unnest class arrays (#29755)

---
 web/src/lib/components/assets/thumbnail/Thumbnail.svelte | 2 +-
 web/src/lib/index.spec.ts                                | 4 ++++
 web/src/lib/index.ts                                     | 6 ++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
index 8583b9f8ac..6e73952b18 100644
--- a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
@@ -247,7 +247,7 @@
     >
       <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]}
+        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', selected && 'rounded-2xl', brokenAssetClass]}
         url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
         altText={$getAltText(asset)}
         widthStyle="{width}px"
diff --git a/web/src/lib/index.spec.ts b/web/src/lib/index.spec.ts
index 20f1244d50..bac0f4cde4 100644
--- a/web/src/lib/index.spec.ts
+++ b/web/src/lib/index.spec.ts
@@ -12,6 +12,10 @@ describe('cleanClass', () => {
   it('should unnest arrays', () => {
     expect(cleanClass('class1', ['class2', 'class3'])).toBe('class1 class2 class3');
   });
+
+  it('should unnest doubly nested arrays', () => {
+    expect(cleanClass('class1', [['class2a', 'class2b'], 'class3'])).toBe('class1 class2a class2b class3');
+  });
 });
 
 describe('isDefined', () => {
diff --git a/web/src/lib/index.ts b/web/src/lib/index.ts
index 10f3deaadc..121087fdd3 100644
--- a/web/src/lib/index.ts
+++ b/web/src/lib/index.ts
@@ -3,8 +3,7 @@ import { twMerge } from 'tailwind-merge';
 
 export const cleanClass = (...classNames: unknown[]) => {
   return twMerge(
-    classNames
-      .flatMap((className) => (Array.isArray(className) ? className : [className]))
+    flattenClass(classNames)
       .filter((className) => {
         if (!className || typeof className === 'boolean') {
           return false;
@@ -16,6 +15,9 @@ export const cleanClass = (...classNames: unknown[]) => {
   );
 };
 
+const flattenClass = (classNames: unknown[]): unknown[] =>
+  classNames.flatMap((className) => (Array.isArray(className) ? flattenClass(className) : [className]));
+
 export const isDefined = <T>(value: T): value is NonNullable<T> => value !== null && value !== undefined;
 
 export const getHeatmapRange = () => {