contextmenu fix

resources/js/components/FilesView/ContextMenu.vue

@@ -3,10 +3,10 @@
         v-show="isVisible"
         :style="{ top: positionY + 'px', left: positionX + 'px' }"
         @click="closeAndResetContextMenu"
-        class="absolute z-20 w-60 overflow-hidden rounded-xl bg-white shadow-lg dark:bg-2x-dark-foreground select-none"
+        class="fixed z-20 w-60 select-none overflow-hidden rounded-xl bg-white shadow-lg dark:bg-2x-dark-foreground"
         ref="contextmenu"
     >
-        <div id="menu-list" class="w-full">
+        <div class="w-full">
             <!--Show empty select contextmenu-->
             <slot name="empty-select" v-if="!item" />
 
@@ -52,32 +52,13 @@ export default {
             this.item = undefined
         },
         showContextMenu(event) {
-            let parent = document.getElementById('menu-list')
-            let nodesSameClass = parent.getElementsByClassName('menu-option')
+            let menu = this.$refs.contextmenu
 
-            let VerticalOffsetArea = nodesSameClass.length * 50
-            let HorizontalOffsetArea = 190
+            let hiddenAreaX = window.innerWidth - event.clientX - menu.clientWidth - 25
+            let hiddenAreaY = window.innerHeight - event.clientY - menu.clientHeight - 25
 
-            let container = document.getElementById('file-view')
-
-            let offset = container.getClientRects()[0]
-
-            let x = event.clientX - offset.left
-            let y = event.clientY - offset.top
-
-            // Set position Y
-            if (container.offsetHeight - y < VerticalOffsetArea) {
-                this.positionY = y - VerticalOffsetArea
-            } else {
-                this.positionY = y
-            }
-
-            // Set position X
-            if (container.offsetWidth - x < HorizontalOffsetArea) {
-                this.positionX = x - HorizontalOffsetArea
-            } else {
-                this.positionX = x
-            }
+            this.positionX = hiddenAreaX < 0 ? event.clientX + hiddenAreaX : event.clientX
+            this.positionY = hiddenAreaY < 0 ? event.clientY + hiddenAreaY : event.clientY
 
             // Show context menu
             this.isVisible = true
@@ -100,9 +81,10 @@ export default {
             this.isVisible = !this.isVisible
 
             if (this.isVisible) {
-                let container = document.getElementById('folder-actions')
+                let container = document.getElementById('folder-actions').getBoundingClientRect()
 
-                this.positionX = container.offsetLeft
+                this.positionX = container.x
+                this.positionY = container.y + 20
             }
         })
     },

resources/js/components/FilesView/NavigationBar.vue

@@ -29,7 +29,7 @@
                 '-translate-x-4 opacity-0': !currentFolder || !isNotHomepage,
                 'translate-x-0 opacity-100': currentFolder && isNotHomepage,
             }"
-            class="ml-3 transform rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground cursor-pointer"
+            class="relative ml-3 transform rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground cursor-pointer"
 			id="folder-actions"
         >
             <more-horizontal-icon size="14" />

resources/js/components/FilesView/Option.vue

@@ -1,7 +1,7 @@
 <template>
     <li
-        class="flex items-center justify-between py-4 px-5 lg:py-3 2xl:py-4"
-        :class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled,}"
+        class="flex items-center justify-between py-4 px-5"
+        :class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled}"
     >
         <div class="flex items-center">
             <div class="mr-4">