fix: update menu to match requirements

frontend/src/components/ContextMenu.vue

@@ -4,7 +4,7 @@
     ref="contextMenu"
     v-show="show"
     :style="{
-      top: `${top}px`,
+      top: `${props.pos.y}px`,
       left: `${left}px`,
     }"
   >
@@ -19,13 +19,6 @@ const emit = defineEmits(["hide"]);
 const props = defineProps<{ show: boolean; pos: { x: number; y: number } }>();
 const contextMenu = ref<HTMLElement | null>(null);
 
-const top = computed(() => {
-  return Math.min(
-    props.pos.y,
-    window.innerHeight - (contextMenu.value?.clientHeight ?? 0)
-  );
-});
-
 const left = computed(() => {
   return Math.min(
     props.pos.x,

frontend/src/components/files/ListingItem.vue

@@ -222,21 +222,12 @@ const itemClick = (event: Event | KeyboardEvent) => {
 };
 
 const contextMenu = (event: MouseEvent) => {
-  const to = setTimeout(() => {
-    touches.value = 0;
-  }, 300);
-
-  touches.value++;
-  if (touches.value > 1) return;
-
   event.preventDefault();
   if (
-    fileStore.selected.length < 2 ||
+    fileStore.selected.length === 0 ||
     event.ctrlKey ||
     fileStore.selected.indexOf(props.index) === -1
   ) {
-    touches.value--;
-    clearTimeout(to);
     click(event);
   }
 };

frontend/src/css/context-menu.css

@@ -1,10 +1,11 @@
 .context-menu {
-  position: fixed;
+  position: absolute;
   background: var(--surfacePrimary);
   min-width: 180px;
+  max-width: 220px;
   border: 1px solid var(--borderSecondary);
   box-shadow: 0 2px 4px var(--borderPrimary);
-  z-index: 1000;
+  z-index: 999;
 }
 
 .context-menu .action {

frontend/src/views/files/FileListing.vue

@@ -205,11 +205,13 @@
           </div>
         </div>
 
-        <span @contextmenu="showContextMenu">
         <h2 v-if="fileStore.req?.numDirs ?? false">
           {{ t("files.folders") }}
         </h2>
-          <div v-if="fileStore.req?.numDirs ?? false">
+        <div
+          v-if="fileStore.req?.numDirs ?? false"
+          @contextmenu="showContextMenu"
+        >
           <item
             v-for="item in dirs"
             :key="base64(item.name)"
@@ -228,7 +230,10 @@
         <h2 v-if="fileStore.req?.numFiles ?? false">
           {{ t("files.files") }}
         </h2>
-          <div v-if="fileStore.req?.numFiles ?? false">
+        <div
+          v-if="fileStore.req?.numFiles ?? false"
+          @contextmenu="showContextMenu"
+        >
           <item
             v-for="item in files"
             :key="base64(item.name)"
@@ -251,46 +256,45 @@
           <action
             v-if="headerButtons.share"
             icon="share"
-              :label="$t('buttons.share')"
+            :label="t('buttons.share')"
             show="share"
           />
           <action
             v-if="headerButtons.rename"
             icon="mode_edit"
-              :label="$t('buttons.rename')"
+            :label="t('buttons.rename')"
             show="rename"
           />
           <action
             v-if="headerButtons.copy"
             id="copy-button"
             icon="content_copy"
-              :label="$t('buttons.copyFile')"
+            :label="t('buttons.copyFile')"
             show="copy"
           />
           <action
             v-if="headerButtons.move"
             id="move-button"
             icon="forward"
-              :label="$t('buttons.moveFile')"
+            :label="t('buttons.moveFile')"
             show="move"
           />
           <action
             v-if="headerButtons.delete"
             id="delete-button"
             icon="delete"
-              :label="$t('buttons.delete')"
+            :label="t('buttons.delete')"
             show="delete"
           />
           <action
             v-if="headerButtons.download"
             icon="file_download"
-              :label="$t('buttons.download')"
+            :label="t('buttons.download')"
             @action="download"
             :counter="fileStore.selectedCount"
           />
-            <action icon="info" :label="$t('buttons.info')" show="info" />
+          <action icon="info" :label="t('buttons.info')" show="info" />
         </context-menu>
-        </span>
 
         <input
           style="display: none"
@@ -1007,10 +1011,11 @@ const fillWindow = (fit = false) => {
 };
 
 const showContextMenu = (event: MouseEvent) => {
+  event.preventDefault();
   isContextMenuVisible.value = true;
   contextMenuPos.value = {
-    x: event.clientX,
+    x: event.clientX + 8,
-    y: event.clientY,
+    y: event.clientY + Math.floor(window.scrollY),
   };
 };