From 4353153fe64fe5ec6282369c7a4e3265ebf51064 Mon Sep 17 00:00:00 2001
From: Eric Barch <eric.michael.barch@gmail.com>
Date: Mon, 20 May 2024 10:59:27 -0400
Subject: [PATCH] fix(web): render failed upload buttons correctly on mobile
 (#9601)

fix(web): Failed upload buttons render correctly on mobile
---
 .../upload-asset-preview.svelte                  | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/shared-components/upload-asset-preview.svelte b/web/src/lib/components/shared-components/upload-asset-preview.svelte
index a442fefcd9..a517d66abc 100644
--- a/web/src/lib/components/shared-components/upload-asset-preview.svelte
+++ b/web/src/lib/components/shared-components/upload-asset-preview.svelte
@@ -24,8 +24,8 @@
   out:fade={{ duration: 100 }}
   class="flex flex-col rounded-lg bg-immich-bg text-xs dark:bg-immich-dark-bg"
 >
-  <div class="grid grid-cols-[65px_auto_auto]">
-    <div class="relative h-[65px]">
+  <div class="grid grid-cols-[65px_auto_auto] max-h-[70px]">
+    <div class="relative">
       <div in:fade={{ duration: 250 }}>
         <ImmichLogo noText class="h-[65px] w-[65px] rounded-bl-lg rounded-tl-lg object-cover p-2" />
       </div>
@@ -83,18 +83,14 @@
       </div>
     </div>
     {#if uploadAsset.state === UploadState.ERROR}
-      <div class="flex h-full flex-col place-content-center place-items-center justify-items-center pr-2">
-        <button
-          on:click={() => handleRetry(uploadAsset)}
-          title="Retry upload"
-          class="flex h-full w-full place-content-center place-items-center text-sm"
-        >
+      <div class="flex h-full flex-col place-content-evenly place-items-center justify-items-center pr-2">
+        <button on:click={() => handleRetry(uploadAsset)} title="Retry upload" class="flex text-sm">
           <span class="text-immich-dark-gray dark:text-immich-dark-fg"><Icon path={mdiRefresh} size="20" /></span>
         </button>
         <button
           on:click={() => uploadAssetsStore.removeUploadAsset(uploadAsset.id)}
           title="Dismiss error"
-          class="flex h-full w-full place-content-center place-items-center text-sm"
+          class="flex text-sm"
         >
           <span class="text-immich-error"><Icon path={mdiCancel} size="20" /></span>
         </button>
@@ -104,7 +100,7 @@
 
   {#if uploadAsset.state === UploadState.ERROR}
     <div class="flex flex-row justify-between">
-      <p class="w-full rounded-md p-1 px-2 text-justify text-[10px] text-immich-error">
+      <p class="w-full rounded-md py-1 px-2 text-justify text-[10px] text-immich-error">
         {uploadAsset.error}
       </p>
     </div>