fix: keep search scroll position when opening the product image preview

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/user-app-v2/src/components/product/SingleProduct.vue

@@ -426,18 +426,25 @@ watch(slides, (list) => {
 // for the former, so opening the preview needs no drag-jitter bookkeeping here
 // the way the old inline handlers did.
 const previewOpen = ref(false)
+let lockedBody = false
 
 function openPreview() {
   if (!hasImages.value) return
   previewOpen.value = true
-  // The preview is teleported to <body> and would otherwise let the page (or
+  // The preview is teleported to <body> and would otherwise let the page
-  // the Drawer) scroll behind it.
+  // scroll behind it. Skipped when ProductMorph already holds <html>: with
-  document.body.style.overflow = 'hidden'
+  // both locked, <body> becomes its own viewport-tall scroller and the page
+  // underneath loses its scroll position.
+  if (document.documentElement.style.overflow !== 'hidden') {
+    document.body.style.overflow = 'hidden'
+    lockedBody = true
+  }
 }
 
 function closePreview() {
   previewOpen.value = false
-  document.body.style.overflow = ''
+  if (lockedBody) document.body.style.overflow = ''
+  lockedBody = false
 }
 
 const wageLabel = computed(() => {
@@ -517,7 +524,7 @@ onBeforeMount(async () => {
 // closed, or the routed page is navigated away from — the body scroll lock it
 // set would otherwise outlive it and leave the rest of the app unscrollable.
 onBeforeUnmount(() => {
-  if (previewOpen.value) document.body.style.overflow = ''
+  if (lockedBody) document.body.style.overflow = ''
 })
 </script>
 

apps/user-app/src/components/product/SingleProduct.vue

@@ -416,18 +416,25 @@ watch(selectedVariant, (v) => {
 // full-screen viewer teleported to <body>, with its own GallerySlider kept in
 // lockstep via the shared `imageIndex` v-model.
 const previewOpen = ref(false)
+let lockedBody = false
 
 function openPreview() {
   if (!hasImages.value) return
   previewOpen.value = true
-  // Teleported to <body>, so without this the page (or the Drawer) would
+  // Teleported to <body>, so without this the page would still scroll behind
-  // still scroll behind the preview.
+  // the preview. Skipped when ProductMorph already holds <html>: with both
-  document.body.style.overflow = 'hidden'
+  // locked, <body> becomes its own viewport-tall scroller and the page
+  // underneath loses its scroll position.
+  if (document.documentElement.style.overflow !== 'hidden') {
+    document.body.style.overflow = 'hidden'
+    lockedBody = true
+  }
 }
 
 function closePreview() {
   previewOpen.value = false
-  document.body.style.overflow = ''
+  if (lockedBody) document.body.style.overflow = ''
+  lockedBody = false
 }
 
 const wageLabel = computed(() => {
@@ -496,7 +503,7 @@ onBeforeMount(async () => {
 // closed, or the routed page is navigated away from — the body scroll lock it
 // set would otherwise outlive it and leave the rest of the app unscrollable.
 onBeforeUnmount(() => {
-  if (previewOpen.value) document.body.style.overflow = ''
+  if (lockedBody) document.body.style.overflow = ''
 })
 </script>