@netless/telebox-insider 1.0.0-alpha.23 → 1.0.0-alpha.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@netless/telebox-insider",
-    "version": "1.0.0-alpha.23",
+    "version": "1.0.0-alpha.24",
     "private": false,
     "description": "Window widget for Whiteboard",
     "license": "MIT",

package/src/TeleBox/index.ts

@@ -857,6 +857,10 @@ export class TeleBox {
         this.$main = $main;
         $boxMain.appendChild($main);
 
+        const $quarantineOuter = document.createElement("div");
+        $quarantineOuter.className = this.wrapClassName("quarantine-outer");
+        $main.appendChild($quarantineOuter);
+
         const $quarantine = document.createElement("div");
         $quarantine.className = this.wrapClassName("quarantine");
         $quarantine.appendChild($body);
@@ -867,10 +871,10 @@ export class TeleBox {
             const $shadowStyle = document.createElement("style");
             $shadowStyle.textContent = shadowStyles;
             $quarantine.insertBefore($shadowStyle, $quarantine.firstChild);
-            const shadow = $main.attachShadow({ mode: "open" });
+            const shadow = $quarantineOuter.attachShadow({ mode: "open" });
             shadow.appendChild($quarantine);
         } else {
-            $main.appendChild($quarantine);
+            $quarantineOuter.appendChild($quarantine);
         }
 
         this._renderResizeHandlers();

package/src/TeleBox/style.scss

@@ -33,9 +33,14 @@
 }
 
 .#{$namespace}-main {
-    position: relative;
     flex: 1;
     width: 100%;
+}
+
+.#{$namespace}-quarantine-outer {
+    position: relative;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
 }