From 25be5fc22db5f541352854cea3c2bb98dbe2f3b1 Mon Sep 17 00:00:00 2001
From: Justin Xiao <o927416847@gmail.com>
Date: Mon, 9 Feb 2026 07:26:25 -0800
Subject: [PATCH] fix(web): prevent context menu from overflowing viewport
 (#26041)

* 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>
---
 .../context-menu/context-menu.svelte          | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/shared-components/context-menu/context-menu.svelte b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
index 7bf9ba58b3..dbe32f2701 100644
--- a/web/src/lib/components/shared-components/context-menu/context-menu.svelte
+++ b/web/src/lib/components/shared-components/context-menu/context-menu.svelte
@@ -47,30 +47,23 @@
 
     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 };
+    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);
-
-  let isTransitioned = $state(false);
 </script>
 
 <div
   bind:clientHeight={height}
-  class="fixed min-w-50 w-max max-w-75 overflow-hidden rounded-lg shadow-lg z-1"
+  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 }}
-  onintroend={() => {
-    isTransitioned = true;
-  }}
-  onoutrostart={() => {
-    isTransitioned = false;
-  }}
 >
   <ul
     {id}
@@ -78,11 +71,8 @@
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledBy}
     bind:this={menuElement}
-    class="{isVisible
-      ? 'max-h-dvh'
-      : 'max-h-0'} flex flex-col transition-all duration-250 ease-in-out outline-none {isTransitioned
-      ? 'overflow-auto'
-      : ''}"
+    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"
   >