fix: use isTouchDevice methods control scrollToTop button display

Author: RYGRIT

app/components/ScrollToTop.client.vue

@@ -9,13 +9,15 @@ const isActive = computed(() => !excludedRoutes.has(route.name as string))
 const SCROLL_TO_TOP_DURATION = 500
 
 const isMounted = useMounted()
+const isTouchDeviceClient = shallowRef(false)
 const isVisible = shallowRef(false)
 const scrollThreshold = 300
 const { isSupported: supportsScrollStateQueries } = useCssSupports(
   'container-type',
   'scroll-state',
   { ssrValue: false },
 )
+const shouldShowButton = computed(() => isActive.value && isTouchDeviceClient.value)
 
 function onScroll() {
   if (supportsScrollStateQueries.value) {
@@ -29,14 +31,15 @@ const { scrollToTop } = useScrollToTop({ duration: SCROLL_TO_TOP_DURATION })
 useEventListener('scroll', onScroll, { passive: true })
 
 onMounted(() => {
+  isTouchDeviceClient.value = isTouchDevice()
   onScroll()
 })
 </script>
 
 <template>
   <!-- When CSS scroll-state is supported, use CSS-only visibility -->
   <button
-    v-if="isActive && supportsScrollStateQueries"
+    v-if="shouldShowButton && supportsScrollStateQueries"
     type="button"
     class="scroll-to-top-css fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
     :aria-label="$t('common.scroll_to_top')"
@@ -56,7 +59,7 @@ onMounted(() => {
     leave-to-class="opacity-0 translate-y-2"
   >
     <button
-      v-if="isActive && isMounted && isVisible"
+      v-if="shouldShowButton && isMounted && isVisible"
       type="button"
       class="fixed bottom-4 inset-ie-4 z-50 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors active:scale-95"
       :aria-label="$t('common.scroll_to_top')"