Prevents small viewports in non-touch devices from zooming in

Ref #24585
When the browser window on a desktop is resized to a small viewport, this fix ensures that the zoom behaviour is disabled. Zoom continues to work in tab viewports in non-touch devices.

Author: niranjan-uma-shankar

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

@@ -48,10 +48,6 @@ export default class GhUnsplashPhoto extends Component {
         this.height = this.width * this.args.photo.ratio;
     }
 
-    get isTouchDevice() {
-        return window.matchMedia('(pointer: coarse)').matches;
-    }
-
     @action
     select(event) {
         event.preventDefault();
@@ -62,13 +58,16 @@ export default class GhUnsplashPhoto extends Component {
     @action
     zoom(event) {
         const {target} = event;
-        const isOverlayButtonClick = GhUnsplashPhoto.OVERLAY_BUTTON_SELECTORS.some(selector => target.closest(selector));                           
+        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 (this.isTouchDevice && isOverlayButtonClick) {
+        if (shouldNotZoom && isOverlayButtonClick) {
             return;
         }
 
-        if (this.isTouchDevice) {
+        if (shouldNotZoom) {
             event.stopPropagation();
             event.preventDefault();
             return;

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;