From fdf52eafd4246c15a9b6c23bcc8e95ce9ad403e4 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 20 Aug 2024 09:22:46 -0300
Subject: [PATCH] Fix error where context menu appears with wrong offset when
 right clicking items list.

---
 .../admin/components/lists/items-list.vue     | 26 ++++++++++++++++---
 src/views/admin/scss/_view-mode-masonry.scss  |  3 ++-
 src/views/admin/scss/_view-mode-records.scss  |  3 ++-
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/views/admin/components/lists/items-list.vue b/src/views/admin/components/lists/items-list.vue
index 00992fc69..3b5fdd3e3 100644
--- a/src/views/admin/components/lists/items-list.vue
+++ b/src/views/admin/components/lists/items-list.vue
@@ -110,7 +110,9 @@
             </div>
         </div>
 
-        <div class="table-wrapper">
+        <div 
+                ref="tainacan-admin-items-list-wrapper"
+                class="table-wrapper">
 
             <!-- Context menu for right click selection -->
             <div
@@ -2744,11 +2746,27 @@ export default {
             }
         },
         onRightClickItem($event, item) {
-            if (!this.$adminOptions.itemsSearchSelectionMode) {
+            if ( !this.$adminOptions.itemsSearchSelectionMode ) {
                 $event.preventDefault();
 
-                this.cursorPosX = $event.clientX;
-                this.cursorPosY = $event.clientY;
+                let wrapperOffsetX = 0;
+                let wrapperOffsetY = 0;
+
+                // These elements have 'container-type: inline-size;', thus they need to be positioned relative to parent
+                if (    
+                    ( this.viewMode == 'masonry' || this.viewMode == 'records' ) &&
+                    this.$refs &&
+                    this.$refs['tainacan-admin-items-list-wrapper']
+                ) {
+                    const wrapperOffsets = this.$refs['tainacan-admin-items-list-wrapper'].getClientRects();
+                    if ( wrapperOffsets.length && wrapperOffsets[0].top && wrapperOffsets[0].left ) {
+                        wrapperOffsetX = wrapperOffsets[0].left;
+                        wrapperOffsetY = wrapperOffsets[0].top;        
+                    }
+                }
+
+                this.cursorPosX = $event.clientX - wrapperOffsetX;
+                this.cursorPosY = $event.clientY - wrapperOffsetY;
                 this.contextMenuItem = item;
             }
         },
diff --git a/src/views/admin/scss/_view-mode-masonry.scss b/src/views/admin/scss/_view-mode-masonry.scss
index b301b1b5e..4f8e53bd1 100644
--- a/src/views/admin/scss/_view-mode-masonry.scss
+++ b/src/views/admin/scss/_view-mode-masonry.scss
@@ -5,7 +5,8 @@
         min-height: 50vh;
     }
 }
-.table-wrapper {
+.table-wrapper:has(.tainacan-masonry-container),
+.table-wrapper:has(.tainacan-masonry-container--skeleton) {
     @supports (contain: inline-size) {
         container-type: inline-size;
         container-name: tablewrapper; 
diff --git a/src/views/admin/scss/_view-mode-records.scss b/src/views/admin/scss/_view-mode-records.scss
index 0e53b5bc6..8b82f3b2f 100644
--- a/src/views/admin/scss/_view-mode-records.scss
+++ b/src/views/admin/scss/_view-mode-records.scss
@@ -5,7 +5,8 @@
         min-height: 50vh;
     }
 }
-.table-wrapper {
+.table-wrapper:has(.tainacan-records-container)
+.table-wrapper:has(.tainacan-records-container--skeleton) {
     @supports (contain: inline-size) {
         container-type: inline-size;
         container-name: tablewrapper;