From 529b7fe748e5e5830b6b28b5130f220826ea0837 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Fri, 6 Sep 2024 15:18:45 +0200
Subject: [PATCH] fix(web): show focus outline for asset thumbnails again
 (#12382)

* fix(web): show focus outline for asset thumbnails again

* fix e2e test
---
 e2e/src/web/specs/shared-link.e2e-spec.ts                | 2 +-
 web/src/lib/components/assets/thumbnail/thumbnail.svelte | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/e2e/src/web/specs/shared-link.e2e-spec.ts b/e2e/src/web/specs/shared-link.e2e-spec.ts
index 8679bb3236..2a02e429a5 100644
--- a/e2e/src/web/specs/shared-link.e2e-spec.ts
+++ b/e2e/src/web/specs/shared-link.e2e-spec.ts
@@ -44,7 +44,7 @@ test.describe('Shared Links', () => {
   test('download from a shared link', async ({ page }) => {
     await page.goto(`/share/${sharedLink.key}`);
     await page.getByRole('heading', { name: 'Test Album' }).waitFor();
-    await page.locator('.group').first().hover();
+    await page.locator(`[data-asset-id="${asset.id}"]`).hover();
     await page.waitForSelector('#asset-group-by-date svg');
     await page.getByRole('checkbox').click();
     await page.getByRole('button', { name: 'Download' }).click();
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 69f777f530..af22887185 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -175,7 +175,7 @@
   data-int={intersecting}
   style:width="{width}px"
   style:height="{height}px"
-  class="group focus-visible:outline-none flex overflow-hidden {disabled
+  class="focus-visible:outline-none flex overflow-hidden {disabled
     ? 'bg-gray-300'
     : 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
 >
@@ -193,6 +193,7 @@
     <!-- svelte queries for all links on afterNavigate, leading to performance problems in asset-grid which updates
      the navigation url on scroll. Replace this with button for now. -->
     <div
+      class="group"
       class:cursor-not-allowed={disabled}
       class:cursor-pointer={!disabled}
       on:mouseenter={onMouseEnter}