From afccb37a3bda71e488ecfca84212cec5fb4137d6 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Mon, 11 Sep 2023 11:55:21 -0400
Subject: [PATCH] fix(web): album selection modal overflow and alignment
 (#4059)

---
 .../components/asset-viewer/album-list-item.svelte   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/album-list-item.svelte b/web/src/lib/components/asset-viewer/album-list-item.svelte
index 24d5a02ca1..ede316ff4b 100644
--- a/web/src/lib/components/asset-viewer/album-list-item.svelte
+++ b/web/src/lib/components/asset-viewer/album-list-item.svelte
@@ -25,21 +25,23 @@
 
 <button
   on:click={() => dispatcher('album')}
-  class="flex w-full gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
+  class="flex w-full gap-4 px-6 py-2 text-left transition-colors hover:bg-gray-200 dark:hover:bg-gray-700"
 >
-  <div class="h-12 w-12 rounded-xl bg-slate-300">
+  <div class="h-12 w-12 shrink-0 rounded-xl bg-slate-300">
     {#if album.albumThumbnailAssetId}
       <img
         src={api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)}
         alt={album.albumName}
-        class={`z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg`}
+        class="z-0 h-full w-full rounded-xl object-cover transition-all duration-300 hover:shadow-lg"
         data-testid="album-image"
         draggable="false"
       />
     {/if}
   </div>
-  <div class="flex h-12 flex-col items-start justify-center">
-    <span>{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span>
+  <div class="flex h-12 flex-col items-start justify-center overflow-hidden">
+    <span class="w-full shrink overflow-hidden text-ellipsis whitespace-nowrap"
+      >{albumNameArray[0]}<b>{albumNameArray[1]}</b>{albumNameArray[2]}</span
+    >
     <span class="flex gap-1 text-sm">
       {#if variant === 'simple'}
         <span