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>