From ccdd9bda05bc9c6b76f99a5fefbdb7a32b845fff Mon Sep 17 00:00:00 2001
From: Julie Blanc <julieblanc@julies-mbp.home>
Date: Sun, 8 Mar 2026 08:51:22 +0100
Subject: [PATCH] correction scroll preview

---
 src/App.vue                            |  1 -
 src/components/editor/PageSettings.vue |  4 ++--
 src/components/ui/ZoomControls.vue     | 16 +++++++++++++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9642ec7..fe1d9ce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -149,7 +149,6 @@ onMounted(async () => {
   height: 100vh;
   border: none;
   transform-origin: top center;
-  transition: transform 0.3s ease;
 }
 
 
diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index ccefeaa..beed919 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -195,7 +195,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, inject } from 'vue';
+import { ref, computed, watch, onMounted, inject, nextTick } from 'vue';
 import bookIcon from '/assets/svg/book.svg?raw';
 import { useStylesheetStore } from '../../stores/stylesheet';
 import { useDebounce } from '../../composables/useDebounce';
@@ -518,7 +518,7 @@ const syncFromStore = () => {
       (rightPageMatch && rightPageMatch[0].includes('string(title)'));
     runningTitle.value = hasRunningTitle;
   } finally {
-    isUpdatingFromStore = false;
+    nextTick(() => { isUpdatingFromStore = false; });
   }
 };
 
diff --git a/src/components/ui/ZoomControls.vue b/src/components/ui/ZoomControls.vue
index 59f92e8..bdf0a7c 100644
--- a/src/components/ui/ZoomControls.vue
+++ b/src/components/ui/ZoomControls.vue
@@ -11,13 +11,23 @@ import { ref, computed } from 'vue';
 
 const zoomLevel = ref(1);
 
-const zoomIn = () => { zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3); };
-const zoomOut = () => { zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.2); };
-const zoomReset = () => { zoomLevel.value = 1; };
+const zoomIn = () => { triggerZoom(); zoomLevel.value = Math.min(zoomLevel.value + 0.1, 3); };
+const zoomOut = () => { triggerZoom(); zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.2); };
+const zoomReset = () => { triggerZoom(); zoomLevel.value = 1; };
+
+const isZooming = ref(false);
+let zoomTimer = null;
+
+const triggerZoom = () => {
+  isZooming.value = true;
+  clearTimeout(zoomTimer);
+  zoomTimer = setTimeout(() => { isZooming.value = false; }, 350);
+};
 
 const zoomStyle = computed(() => ({
   transform: `scale(${zoomLevel.value})`,
   height: `${100 / zoomLevel.value}vh`,
+  transition: isZooming.value ? 'transform 0.3s ease' : 'none',
 }));
 
 defineExpose({ zoomStyle });