fix(web): better touch device detection (#17144)

* fix(web): better touch device detection

* variable name

Author: alextran1502

Diff for: web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -72,7 +72,7 @@
     IMAGE_THUMBNAIL: { THUMBHASH_FADE_DURATION },
   } = TUNABLES;
 
-  let isTouchDevice = $derived(mobileDevice.hoverNone);
+  let usingMobileDevice = $derived(mobileDevice.pointerCoarse);
   let focussableElement: HTMLElement | undefined = $state();
   let mouseOver = $state(false);
   let loaded = $state(false);
@@ -112,7 +112,7 @@
   };
 
   const onMouseEnter = () => {
-    if (isTouchDevice) {
+    if (usingMobileDevice) {
       return;
     }
     mouseOver = true;
@@ -191,7 +191,7 @@
     onfocus={handleFocus}
     data-testid="container-with-tabindex"
   >
-    {#if !isTouchDevice && mouseOver && !disableMouseOver}
+    {#if !usingMobileDevice && mouseOver && !disableMouseOver}
       <!-- lazy show the url on mouse over-->
       <a
         class="absolute z-30 {className} top-[41px]"
@@ -238,7 +238,7 @@
       class:rounded-xl={selected}
     >
       <!-- Gradient overlay on hover -->
-      {#if !isTouchDevice}
+      {#if !usingMobileDevice}
         <div
           class="absolute z-10 h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100"
           class:rounded-xl={selected}

Diff for: web/src/lib/components/photos-page/asset-grid.svelte

@@ -83,7 +83,7 @@
   let bottomSectionHeight = 60;
   let leadout = $state(false);
 
-  const usingMobileDevice = $derived(mobileDevice.hoverNone);
+  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
 
   const scrollTo = (top: number) => {
     element?.scrollTo({ top });

Diff for: web/src/lib/components/shared-components/scrubber/scrubber.svelte

@@ -268,7 +268,7 @@
       globalThis.removeEventListener('touchmove', onTouchMove);
     };
   });
-  const usingMobileDevice = $derived(mobileDevice.hoverNone);
+  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
 </script>
 
 <svelte:window

Diff for: web/src/lib/stores/mobile-device.svelte.ts

@@ -1,11 +1,11 @@
 import { MediaQuery } from 'svelte/reactivity';
 
-const hoverNone = new MediaQuery('hover: none');
+const pointerCoarse = new MediaQuery('pointer:coarse');
 const maxMd = new MediaQuery('max-width: 767px');
 
 export const mobileDevice = {
-  get hoverNone() {
-    return hoverNone.current;
+  get pointerCoarse() {
+    return pointerCoarse.current;
   },
   get maxMd() {
     return maxMd.current;