feat: limit vite-error-overlay in the slides area (#1709)

Author: kermanx

packages/client/pages/play.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
+import { useStyleTag } from '@vueuse/core'
+import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { registerShortcuts } from '../logic/shortcuts'
 import Controls from '../internals/Controls.vue'
@@ -36,6 +37,19 @@ registerShortcuts()
 if (__SLIDEV_FEATURE_WAKE_LOCK__)
   useWakeLock()
 
+useStyleTag(computed(() => `
+vite-error-overlay {
+  --width: calc(100vw - ${isEditorVertical.value ? 0 : editorWidth.value}px);
+  --height: calc(100vh - ${isEditorVertical.value ? editorHeight.value : 0}px);
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: calc(var(--width) / var(--slidev-slide-scale));
+  height: calc(var(--height) / var(--slidev-slide-scale));
+  transform-origin: top left;
+  transform: scale(var(--slidev-slide-scale));
+}`))
+
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const SideEditor = shallowRef<any>()