feat(web): improve shared link management on mobile (#11720)

* feat(web): improve shared link management on mobile

* fix format

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 text');
+    expect(img.className).toBe('z-0 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 asdf');
+    expect(img.className).toBe('z-0 rounded-xl object-cover aspect-square asdf');
     expect(img.getAttribute('src')).toStrictEqual(expect.any(String));
   });
 });

web/src/lib/components/album-page/album-cover.svelte

@@ -14,10 +14,8 @@
   $: thumbnailUrl = album.albumThumbnailAssetId ? getAssetThumbnailUrl({ id: album.albumThumbnailAssetId }) : null;
 </script>
 
-<div class="relative aspect-square">
-  {#if thumbnailUrl}
-    <AssetCover {alt} class={className} src={thumbnailUrl} {preload} />
-  {:else}
-    <NoCover {alt} class={className} {preload} />
-  {/if}
-</div>
+{#if thumbnailUrl}
+  <AssetCover {alt} class={className} src={thumbnailUrl} {preload} />
+{:else}
+  <NoCover {alt} class={className} {preload} />
+{/if}