Fix issues with touch actions

frontend/js/components/Dropdown.vue

@@ -161,6 +161,8 @@
         }
       },
       closeFromDoc: function (event) {
+        if (!this.active) return
+
         const target = event.target
 
         if (event.type === 'scroll') {
@@ -172,8 +174,13 @@
           }
         }
 
-        if (!this.clickable) this.close()
-        else if (!this.$el.querySelector('[data-dropdown-content]').contains(target) && this.clickable) this.close()
+        // timeout so the click is not triggered directly
+        this.timer = setTimeout(() => {
+          this.timer = null
+
+          if (!this.clickable) this.close()
+          else if (!this.$el.querySelector('[data-dropdown-content]').contains(target) && this.clickable) this.close()
+        }, 1)
       },
       open: function (onShow) {
         if (this.active) return

frontend/scss/_imports.scss

@@ -79,6 +79,7 @@
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ sections */
 
+@import 'vendor/cropperjs';
 @import 'vendor/flatpickr';
 @import 'vendor/vselect';
 

frontend/scss/vendor/_cropperjs.scss

@@ -0,0 +1,30 @@
+/* make hit area for cropping points larger to help touch users crop images */
+
+.cropper-crop-box {
+  container-type: inline-size;
+  container-name: cropbox;
+}
+
+.cropper-point::after {
+  content: '';
+  position: absolute;
+  inset: -2px;
+}
+
+@container cropbox (min-width: 40px) {
+  .cropper-point::after {
+    inset: -5px;
+  }
+}
+
+@container cropbox (min-width: 60px) {
+  .cropper-point::after {
+    inset: -10px;
+  }
+}
+
+@container cropbox (min-width: 100px) {
+  .cropper-point::after {
+    inset: -20px;
+  }
+}