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"
   >