mirror of
https://github.com/immich-app/immich.git
synced 2026-02-12 03:47:51 +03:00
25be5fc22d
* fix(web): prevent context menu from overflowing viewport The context menu used `max-h-dvh` (100% viewport height) as its max height, but did not account for the menu's top position. When the menu opens at y > 0, its bottom extends beyond the viewport. Compute `maxHeight` dynamically based on the menu's top position and apply it as an inline style, so the menu always fits within the viewport and scrolls when content exceeds the available space. * fix: linting * fix: overflow --------- Co-authored-by: Jason Rasmussen <jason@rasm.me>
82 lines
2.5 KiB
Svelte
82 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { clickOutside } from '$lib/actions/click-outside';
|
|
import { languageManager } from '$lib/managers/language-manager.svelte';
|
|
import type { Snippet } from 'svelte';
|
|
import { quintOut } from 'svelte/easing';
|
|
import { slide } from 'svelte/transition';
|
|
|
|
interface Props {
|
|
isVisible?: boolean;
|
|
direction?: 'left' | 'right';
|
|
x?: number;
|
|
y?: number;
|
|
id?: string | undefined;
|
|
ariaLabel?: string | undefined;
|
|
ariaLabelledBy?: string | undefined;
|
|
ariaActiveDescendant?: string | undefined;
|
|
menuElement?: HTMLUListElement | undefined;
|
|
onClose?: (() => void) | undefined;
|
|
children?: Snippet;
|
|
}
|
|
|
|
let {
|
|
isVisible = false,
|
|
direction = 'right',
|
|
x = 0,
|
|
y = 0,
|
|
id = undefined,
|
|
ariaLabel = undefined,
|
|
ariaLabelledBy = undefined,
|
|
ariaActiveDescendant = undefined,
|
|
menuElement = $bindable(),
|
|
onClose = undefined,
|
|
children,
|
|
}: Props = $props();
|
|
|
|
const swap = (direction: string) => (direction === 'left' ? 'right' : 'left');
|
|
|
|
const layoutDirection = $derived(languageManager.rtl ? swap(direction) : direction);
|
|
const position = $derived.by(() => {
|
|
if (!menuElement) {
|
|
return { left: 0, top: 0 };
|
|
}
|
|
|
|
const rect = menuElement.getBoundingClientRect();
|
|
const directionWidth = layoutDirection === 'left' ? rect.width : 0;
|
|
const menuHeight = Math.min(menuElement.clientHeight, height) || 0;
|
|
|
|
const left = Math.max(8, Math.min(window.innerWidth - rect.width, x - directionWidth));
|
|
const top = Math.max(8, Math.min(window.innerHeight - menuHeight, y));
|
|
const maxHeight = window.innerHeight - top - 8;
|
|
|
|
return { left, top, maxHeight };
|
|
});
|
|
|
|
// We need to bind clientHeight since the bounding box may return a height
|
|
// of zero when starting the 'slide' animation.
|
|
let height: number = $state(0);
|
|
</script>
|
|
|
|
<div
|
|
bind:clientHeight={height}
|
|
class="fixed min-w-50 w-max max-w-75 overflow-hidden rounded-lg shadow-lg z-1 immich-scrollbar"
|
|
style:left="{position.left}px"
|
|
style:top="{position.top}px"
|
|
transition:slide={{ duration: 250, easing: quintOut }}
|
|
use:clickOutside={{ onOutclick: onClose }}
|
|
>
|
|
<ul
|
|
{id}
|
|
aria-activedescendant={ariaActiveDescendant ?? ''}
|
|
aria-label={ariaLabel}
|
|
aria-labelledby={ariaLabelledBy}
|
|
bind:this={menuElement}
|
|
class="flex flex-col transition-all duration-250 ease-in-out outline-none overflow-auto immich-scrollbar"
|
|
style:max-height={isVisible ? `${position.maxHeight}px` : '0px'}
|
|
role="menu"
|
|
tabindex="-1"
|
|
>
|
|
{@render children?.()}
|
|
</ul>
|
|
</div>
|