Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-09 03:04:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): Asset viewer stack thumbnails overflow on top of asset (#19088)

Browse Source 
* - 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
This commit is contained in:
xCJPECKOVERx 2025-06-17 10:19:30 -04:00 committed by GitHub
parent f28c0d912c
commit 8038ae1e7a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -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
/>