From 8038ae1e7aa22eef8e373b088aa74e8cbdd17457 Mon Sep 17 00:00:00 2001
From: xCJPECKOVERx <cjpeckover@hotmail.ca>
Date: Tue, 17 Jun 2025 10:19:30 -0400
Subject: [PATCH] fix(web): Asset viewer stack thumbnails overflow on top of
 asset (#19088)

* - create constants for thet asset-viewer stack thumbnail sizes
- use 2x selected thumbnail size to set the max-height of the stack-slideshow container.

* - increase the stack-slideshow max-height as it's scrolled

* Revert "- increase the stack-slideshow max-height as it's scrolled"

This reverts commit da4614547acfb8853258071c1b192c8162b86424.

* change asset stack veritcal scroll to horizontal scroll
---
 .../lib/components/asset-viewer/asset-viewer.svelte    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 34e00625b5..9ab33b7ce1 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -8,9 +8,9 @@
   import { AssetAction, ProjectionType } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { closeEditorCofirm } from '$lib/stores/asset-editor.store';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { isShowDetail } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
@@ -91,6 +91,8 @@
     slideshowState,
     slideshowTransition,
   } = slideshowStore;
+  const stackThumbnailSize = 60;
+  const stackSelectedThumbnailSize = 65;
 
   let appearsInAlbums: AlbumResponseDto[] = $state([]);
   let shouldPlayMotionPhoto = $state(false);
@@ -546,9 +548,9 @@
     {@const stackedAssets = stack.assets}
     <div
       id="stack-slideshow"
-      class="flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 overflow-x-auto horizontal-scrollbar"
+      class="flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 overflow-x-auto overflow-y-hidden horizontal-scrollbar"
     >
-      <div class="relative w-full">
+      <div class="relative flex flex-row no-wrap">
         {#each stackedAssets as stackedAsset (stackedAsset.id)}
           <div
             class={['inline-block px-1 relative transition-all pb-2']}
@@ -565,7 +567,7 @@
               }}
               onMouseEvent={({ isMouseOver }) => handleStackedAssetMouseEvent(isMouseOver, stackedAsset)}
               readonly
-              thumbnailSize={stackedAsset.id === asset.id ? 65 : 60}
+              thumbnailSize={stackedAsset.id === asset.id ? stackSelectedThumbnailSize : stackThumbnailSize}
               showStackedIcon={false}
               disableLinkMouseOver
             />