Fix dragndrop

.github/workflows/build-macos.yml

@@ -34,7 +34,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 24
       - name: Setup
         run: ./scripts/osx/setup_environment.sh
       - name: Determine Release

frontend/app.js

@@ -1,6 +1,6 @@
 //nodeRequire is used instead of require due to clash with node and jquery
 //see section - I can not use jQuery/RequireJS/Meteor/AngularJS in Electron : https://www.electronjs.org/docs/latest/faq/
-const { ipcRenderer } = nodeRequire('electron');
+const { ipcRenderer, webUtils } = nodeRequire('electron');
 path = nodeRequire('path');
 fs = nodeRequire('fs');
 
@@ -911,7 +911,8 @@ function onDropFile( e ){
             const files = e.originalEvent.dataTransfer.files;
             // import single project folder
             $("#projectName").val( files[0].name );
-            const projectFullPath = files[0].path;
+            // Electron 32+ removed the File.path augmentation; use webUtils.getPathForFile instead.
+            const projectFullPath = webUtils.getPathForFile( files[0] );
             const projectParentPath = path.normalize(projectFullPath + '/..');
             $("#projectPath").val( projectParentPath ).triggerHandler('change');
 

frontend/static/css/index.css

@@ -91,12 +91,52 @@ body.enableConsole.showConsole #consoleContainer {
   color: inherit;
 }
 
-#dropZone {
-  height: 500px;
+/* Make the file-drop modal fill the whole window so the entire window is a
+   valid (and visible) drop target. Semantic UI shows the modal inside a
+   full-screen flexbox dimmer and forces the modal itself to position:static so
+   flex can center it as a small, content-sized box. We override that with
+   position:fixed !important + inset:0 so the modal (and its drop overlay) cover
+   the whole viewport instead of just the centered box. */
+
+#fileDropModal.ui.modal {
+  position: fixed !important;
+  top: 20px !important;
+  left: 20px !important;
+  right: 20px !important;
+  bottom: 20px !important;
+  width: auto !important;
+  height: auto !important;
+  max-width: none !important;
+  max-height: none !important;
+  margin: 0 !important;
+  transform: none !important;
+  background: white;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+#fileDropModal > .content {
+  width: 100% !important;
+  height: 100% !important;
+  padding: 0 !important;
+  background: transparent;
+}
+
+#fileDropModal #dropZone {
+  height: 100%;
   width: 100%;
+  height: calc(100% - 40px);
+  width: calc(100% - 40px);
+
+  border-radius: 5px;
+
+  box-sizing: border-box;
   border: 1px dashed black;
-  margin: 10px 0;
+  margin: 20px;
   padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #dropZone.accept {