Fix mobile tap behavior on Unsplash images

ghost/admin/app/components/gh-unsplash-photo.js

@@ -7,6 +7,13 @@ export default class GhUnsplashPhoto extends Component {
     @tracked height = 0;
     @tracked width = 1200;
 
+    // Overlay button selectors for touch device handling
+    static OVERLAY_BUTTON_SELECTORS = [
+        '.gh-unsplash-button-likes',
+        '.gh-unsplash-button-download',
+        '.gh-unsplash-photo-author'
+    ];
+
     get style() {
         return htmlSafe(this.args.zoomed ? 'width: auto; margin: 0;' : '');
     }
@@ -51,6 +58,20 @@ export default class GhUnsplashPhoto extends Component {
     @action
     zoom(event) {
         const {target} = event;
+        const isOverlayButtonClick = GhUnsplashPhoto.OVERLAY_BUTTON_SELECTORS.some(selector => target.closest(selector));
+        const isMobileViewport = window.matchMedia('(max-width: 540px)').matches;
+        const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;
+        const shouldNotZoom = isMobileViewport || isTouchDevice;
+
+        if (shouldNotZoom && isOverlayButtonClick) {
+            return;
+        }
+
+        if (shouldNotZoom) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
 
         // only zoom when it wasn't one of the child links clicked
         if (!target.matches('a') && target.closest('a').classList.contains('gh-unsplash-photo')) {

ghost/admin/app/styles/components/unsplash.css

@@ -131,6 +131,12 @@
     cursor: zoom-in;
 }
 
+@media (max-width: 540px) {
+    .gh-unsplash-photo {
+        cursor: default;
+    }
+}
+
 .gh-unsplash-photo-container > img {
     position: absolute;
     display: block;