From 58fa2eca2c1398079b51f054162c63d35205ad86 Mon Sep 17 00:00:00 2001
From: Mike Byrne <mike@area17.com>
Date: Mon, 6 Jan 2025 17:28:23 +0000
Subject: [PATCH] increase cropping point hit area

to make image cropping easier on touch devices
---
 frontend/scss/_imports.scss          |  1 +
 frontend/scss/vendor/_cropperjs.scss | 30 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 frontend/scss/vendor/_cropperjs.scss

diff --git a/frontend/scss/_imports.scss b/frontend/scss/_imports.scss
index dc0dcf251..a752521cf 100644
--- a/frontend/scss/_imports.scss
+++ b/frontend/scss/_imports.scss
@@ -79,6 +79,7 @@
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ sections */
 
+@import 'vendor/cropperjs';
 @import 'vendor/flatpickr';
 @import 'vendor/vselect';
 
diff --git a/frontend/scss/vendor/_cropperjs.scss b/frontend/scss/vendor/_cropperjs.scss
new file mode 100644
index 000000000..e3ca1b7f7
--- /dev/null
+++ b/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;
+  }
+}