From 742e5b6329fac3bdbe1d6f246d7a9c09765fed1d Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Tue, 12 Mar 2024 12:10:16 -0700
Subject: [PATCH] fix(files): Right click menu positioning

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 apps/files/src/components/FileEntry/FileEntryActions.vue | 5 +++--
 apps/files/src/components/FileEntryMixin.ts              | 9 +++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index 87ffef1fa3a..ff28369049b 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -352,12 +352,13 @@ export default Vue.extend({
 <style lang="scss">
 // Allow right click to define the position of the menu
 // only if defined
-[style*="mouse-pos-x"] .v-popper__popper {
+main.app-content[style*="mouse-pos-x"] .v-popper__popper {
 	transform: translate3d(var(--mouse-pos-x), var(--mouse-pos-y), 0px) !important;
 
 	// If the menu is too close to the bottom, we move it up
 	&[data-popper-placement="top"] {
-		transform: translate3d(var(--mouse-pos-x), calc(var(--mouse-pos-y) - 50vh), 0px) !important;
+		// 34px added to align with the top of the cursor
+		transform: translate3d(var(--mouse-pos-x), calc(var(--mouse-pos-y) - 50vh + 34px), 0px) !important;
 	}
 	// Hide arrow if floating
 	.v-popper__arrow-container {
diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts
index 5a20eb1ecc1..5834b058f12 100644
--- a/apps/files/src/components/FileEntryMixin.ts
+++ b/apps/files/src/components/FileEntryMixin.ts
@@ -162,7 +162,7 @@ export default defineComponent({
 				if (opened) {
 					// Reset any right click position override on close
 					// Wait for css animation to be done
-					const root = this.$root.$el as HTMLElement
+					const root = this.$el?.closest('main.app-content') as HTMLElement
 					root.style.removeProperty('--mouse-pos-x')
 					root.style.removeProperty('--mouse-pos-y')
 				}
@@ -210,12 +210,13 @@ export default defineComponent({
 			// The grid mode is compact enough to not care about
 			// the actions menu mouse position
 			if (!this.gridMode) {
-				const root = this.$root.$el as HTMLElement
+				// Actions menu is contained within the app content
+				const root = this.$el?.closest('main.app-content') as HTMLElement
 				const contentRect = root.getBoundingClientRect()
 				// Using Math.min/max to prevent the menu from going out of the AppContent
 				// 200 = max width of the menu
-				root.style.setProperty('--mouse-pos-x', Math.max(contentRect.left, Math.min(event.clientX, event.clientX - 200)) + 'px')
-				root.style.setProperty('--mouse-pos-y', Math.max(contentRect.top, event.clientY - contentRect.top) + 'px')
+				root.style.setProperty('--mouse-pos-x', Math.max(0, event.clientX - contentRect.left - 200) + 'px')
+				root.style.setProperty('--mouse-pos-y', Math.max(0, event.clientY - contentRect.top) + 'px')
 			}
 
 			// If the clicked row is in the selection, open global menu