From ecc85ff6c6b449b1b825dd1758c4123e0103b903 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Fri, 6 Sep 2024 15:16:39 +0200
Subject: [PATCH] fix(web): ensure shared link covers are full size (#12386)

---
 .../lib/components/album-page/__tests__/album-cover.spec.ts | 4 ++--
 web/src/lib/components/album-page/album-card.svelte         | 2 +-
 .../sharedlinks-page/covers/__tests__/asset-cover.spec.ts   | 2 +-
 .../sharedlinks-page/covers/__tests__/no-cover.spec.ts      | 2 +-
 .../sharedlinks-page/covers/__tests__/share-cover.spec.ts   | 6 +++---
 .../components/sharedlinks-page/covers/asset-cover.svelte   | 2 +-
 .../lib/components/sharedlinks-page/covers/no-cover.svelte  | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/album-page/__tests__/album-cover.spec.ts b/web/src/lib/components/album-page/__tests__/album-cover.spec.ts
index ec4878cd15..5fa8b96008 100644
--- a/web/src/lib/components/album-page/__tests__/album-cover.spec.ts
+++ b/web/src/lib/components/album-page/__tests__/album-cover.spec.ts
@@ -19,7 +19,7 @@ describe('AlbumCover component', () => {
     const img = component.getByTestId('album-image') as HTMLImageElement;
     expect(img.alt).toBe('someName');
     expect(img.getAttribute('loading')).toBe('lazy');
-    expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
+    expect(img.className).toBe('size-full rounded-xl object-cover aspect-square text');
     expect(img.getAttribute('src')).toBe('/asdf');
     expect(getAssetThumbnailUrl).toHaveBeenCalledWith({ id: '123' });
   });
@@ -36,7 +36,7 @@ describe('AlbumCover component', () => {
     const img = component.getByTestId('album-image') as HTMLImageElement;
     expect(img.alt).toBe('unnamed_album');
     expect(img.getAttribute('loading')).toBe('eager');
-    expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square asdf');
+    expect(img.className).toBe('size-full rounded-xl object-cover aspect-square asdf');
     expect(img.getAttribute('src')).toStrictEqual(expect.any(String));
   });
 });
diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
index 60eda166ab..f574c65f0b 100644
--- a/web/src/lib/components/album-page/album-card.svelte
+++ b/web/src/lib/components/album-page/album-card.svelte
@@ -44,7 +44,7 @@
     </div>
   {/if}
 
-  <AlbumCover {album} {preload} class="h-full w-full transition-all duration-300 hover:shadow-lg" />
+  <AlbumCover {album} {preload} class="transition-all duration-300 hover:shadow-lg" />
 
   <div class="mt-4">
     <p
diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts
index a7a4a069d3..1aecc73404 100644
--- a/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts
+++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/asset-cover.spec.ts
@@ -13,6 +13,6 @@ describe('AssetCover component', () => {
     expect(img.alt).toBe('123');
     expect(img.getAttribute('src')).toBe('wee');
     expect(img.getAttribute('loading')).toBe('eager');
-    expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square asdf');
+    expect(img.className).toBe('size-full rounded-xl object-cover aspect-square asdf');
   });
 });
diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts
index bdf0b8878c..bb87c02135 100644
--- a/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts
+++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/no-cover.spec.ts
@@ -10,7 +10,7 @@ describe('NoCover component', () => {
     });
     const img = component.getByTestId('album-image') as HTMLImageElement;
     expect(img.alt).toBe('123');
-    expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square asdf');
+    expect(img.className).toBe('size-full rounded-xl object-cover aspect-square asdf');
     expect(img.getAttribute('loading')).toBe('eager');
     expect(img.src).toStrictEqual(expect.any(String));
   });
diff --git a/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts b/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts
index 83ca07b40e..76de04ea31 100644
--- a/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts
+++ b/web/src/lib/components/sharedlinks-page/covers/__tests__/share-cover.spec.ts
@@ -17,7 +17,7 @@ describe('ShareCover component', () => {
     const img = component.getByTestId('album-image') as HTMLImageElement;
     expect(img.alt).toBe('123');
     expect(img.getAttribute('loading')).toBe('lazy');
-    expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
+    expect(img.className).toBe('size-full rounded-xl object-cover aspect-square text');
   });
 
   it('renders an image when the shared link is an individual share', () => {
@@ -30,7 +30,7 @@ describe('ShareCover component', () => {
     const img = component.getByTestId('album-image') as HTMLImageElement;
     expect(img.alt).toBe('individual_share');
     expect(img.getAttribute('loading')).toBe('lazy');
-    expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
+    expect(img.className).toBe('size-full rounded-xl object-cover aspect-square text');
     expect(img.getAttribute('src')).toBe('/asdf');
     expect(getAssetThumbnailUrl).toHaveBeenCalledWith('someId');
   });
@@ -44,7 +44,7 @@ describe('ShareCover component', () => {
     const img = component.getByTestId('album-image') as HTMLImageElement;
     expect(img.alt).toBe('unnamed_share');
     expect(img.getAttribute('loading')).toBe('lazy');
-    expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square text');
+    expect(img.className).toBe('size-full rounded-xl object-cover aspect-square text');
   });
 
   it.skip('renders fallback image when asset is not resized', () => {
diff --git a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte
index d8b0a1b0d7..bf5031e39d 100644
--- a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte
@@ -16,7 +16,7 @@
   <img
     {alt}
     on:error={() => (isBroken = true)}
-    class="z-0 rounded-xl object-cover aspect-square {className}"
+    class="size-full rounded-xl object-cover aspect-square {className}"
     data-testid="album-image"
     draggable="false"
     loading={preload ? 'eager' : 'lazy'}
diff --git a/web/src/lib/components/sharedlinks-page/covers/no-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/no-cover.svelte
index 45d7d4b315..087204d6a5 100644
--- a/web/src/lib/components/sharedlinks-page/covers/no-cover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/no-cover.svelte
@@ -7,7 +7,7 @@
 
 <enhanced:img
   {alt}
-  class="z-0 rounded-xl object-cover aspect-square {className}"
+  class="size-full rounded-xl object-cover aspect-square {className}"
   data-testid="album-image"
   draggable="false"
   loading={preload ? 'eager' : 'lazy'}