From 7a83baaf272752c54f5efa08b31a68f0b31bccff Mon Sep 17 00:00:00 2001
From: Min Idzelis <min123@gmail.com>
Date: Sun, 8 Mar 2026 03:37:41 -0400
Subject: [PATCH] feat: responsive video duration in thumbnail (#26770)

---
 .../components/assets/thumbnail/thumbnail.svelte   | 14 +++++++-------
 .../assets/thumbnail/video-thumbnail.svelte        | 10 +++++++---
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 6a786c6417..64b5a835ed 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -334,27 +334,27 @@
 
         <!-- Favorite asset star -->
         {#if !authManager.isSharedLink && asset.isFavorite}
-          <div class="z-2 absolute bottom-2 start-2">
+          <div class="z-2 absolute bottom-2 inset-s-2">
             <Icon data-icon-favorite icon={mdiHeart} size="24" class="text-white" />
           </div>
         {/if}
 
         {#if !!assetOwner}
-          <div class="z-2 absolute bottom-1 end-2 max-w-[50%]">
-            <p class="text-xs font-medium text-white drop-shadow-lg max-w-[100%] truncate">
+          <div class="z-2 absolute bottom-1 inset-e-2 max-w-[50%]">
+            <p class="text-xs font-medium text-white drop-shadow-lg max-w-full truncate">
               {assetOwner.name}
             </p>
           </div>
         {/if}
 
         {#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
-          <div class={['z-2 absolute start-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
+          <div class={['z-2 absolute inset-s-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
             <Icon data-icon-archive icon={mdiArchiveArrowDownOutline} size="24" class="text-white" />
           </div>
         {/if}
 
         {#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR}
-          <div class="z-2 absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+          <div class="z-2 absolute inset-e-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
             <span class="pe-2 pt-2">
               <Icon icon={mdiRotate360} size="24" />
             </span>
@@ -362,7 +362,7 @@
         {/if}
 
         {#if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000')}
-          <div class="z-2 absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+          <div class="z-2 absolute inset-e-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
             <span class="pe-2 pt-2">
               <Icon icon={mouseOver ? mdiMotionPauseOutline : mdiFileGifBox} size="24" />
             </span>
@@ -374,7 +374,7 @@
           <div
             class={[
               'z-2 absolute flex place-items-center gap-1 text-xs font-medium text-white',
-              asset.isImage && !asset.livePhotoVideoId ? 'top-0 end-0' : 'top-7 end-1',
+              asset.isImage && !asset.livePhotoVideoId ? 'top-0 inset-e-0' : 'top-7 inset-e-1',
             ]}
           >
             <span class="pe-2 pt-2 flex place-items-center gap-1">
diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
index 9d3a6bfcb6..b4772cc1c4 100644
--- a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
@@ -89,10 +89,10 @@
 {/if}
 
 <div
-  class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white text-shadow-[1px_1px_6px_rgb(0_0_0)]"
+  class="@container absolute inset-x-0 top-0 flex justify-end place-items-center gap-1 text-xs font-medium text-white text-shadow-[1px_1px_6px_rgb(0_0_0)]"
 >
   {#if showTime}
-    <span class="pt-2">
+    <span class="hidden @min-[100px]:inline pt-2">
       {#if remainingSeconds < 60}
         {Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
       {:else if remainingSeconds < 3600}
@@ -104,7 +104,11 @@
   {/if}
 
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <span class="pe-2 pt-2 drop-shadow-[1px_1px_6px_rgb(0_0_0)]" onmouseenter={onMouseEnter} onmouseleave={onMouseLeave}>
+  <span
+    class="pe-2 pt-2 @max-[99px]:scale-75 @max-[99px]:pe-1 @max-[99px]:pt-1 drop-shadow-[1px_1px_6px_rgb(0_0_0)]"
+    onmouseenter={onMouseEnter}
+    onmouseleave={onMouseLeave}
+  >
     {#if enablePlayback}
       {#if loading}
         <LoadingSpinner size="large" />