From 152f3973bfae4263a07476a827301bdade8cda3f Mon Sep 17 00:00:00 2001
From: Koushik Dutta <koushd@gmail.com>
Date: Wed, 7 Dec 2022 13:32:16 -0800
Subject: [PATCH] core: fix zone editor

---
 plugins/core/package-lock.json                            | 4 ++--
 plugins/core/package.json                                 | 2 +-
 .../core/ui/src/components/clippath/ClipPathEditor.vue    | 8 ++++----
 plugins/core/ui/src/interfaces/CameraViewer.vue           | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/plugins/core/package-lock.json b/plugins/core/package-lock.json
index 94a88f719..ef3458f87 100644
--- a/plugins/core/package-lock.json
+++ b/plugins/core/package-lock.json
@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.65",
+   "version": "0.1.66",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.1.65",
+         "version": "0.1.66",
          "license": "Apache-2.0",
          "dependencies": {
             "@scrypted/common": "file:../../common",
diff --git a/plugins/core/package.json b/plugins/core/package.json
index 88b5ba296..a015310f6 100644
--- a/plugins/core/package.json
+++ b/plugins/core/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.65",
+   "version": "0.1.66",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",
diff --git a/plugins/core/ui/src/components/clippath/ClipPathEditor.vue b/plugins/core/ui/src/components/clippath/ClipPathEditor.vue
index 5d6d472f8..d79261a66 100644
--- a/plugins/core/ui/src/components/clippath/ClipPathEditor.vue
+++ b/plugins/core/ui/src/components/clippath/ClipPathEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="playground_container" class="playground-container flex">
-    <v-btn-toggle mandatory v-model="pointMode">
+    <v-btn-toggle mandatory v-model="pointMode" style="position: absolute; left: 0; top: 0; z-index: 3000">
       <v-btn @click="customizing = false" width="100px">
         {{ "Drag Points" }}
       </v-btn>
@@ -11,9 +11,9 @@
         {{ "Clear Points" }}
       </v-btn>
     </v-btn-toggle>
-    <section
+    <div
       @click="addHandle"
-      class="playground"
+      class="playground pa-0"
       style="width: 100%; height: 100%"
       :class="{ customizing: customizing, start: !lazyValue.length }"
     >
@@ -42,7 +42,7 @@
           :customizing="customizing"
         ></ClipPathEditorHandles>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 
diff --git a/plugins/core/ui/src/interfaces/CameraViewer.vue b/plugins/core/ui/src/interfaces/CameraViewer.vue
index 0866c4941..3a74a0106 100644
--- a/plugins/core/ui/src/interfaces/CameraViewer.vue
+++ b/plugins/core/ui/src/interfaces/CameraViewer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    style="position: relative; overflow: hidden; width: 100%; height: 100%"
+    style="position: relative; overflow: hidden; width: 100%; height: 100%; display: flex;"
     @wheel="doTimeScroll"
   >
     <video