From 854ef00d1af169ea73cc523101d3238f0894da67 Mon Sep 17 00:00:00 2001
From: Kacper Kula <kulak@kulak.at>
Date: Sat, 20 Jul 2024 00:28:11 +0100
Subject: [PATCH] chore: fixing how we manage width and height change (not
 styling directly)

---
 main.ts    | 14 +++++++-------
 styles.css |  2 ++
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/main.ts b/main.ts
index 64fc7c4..70d3365 100644
--- a/main.ts
+++ b/main.ts
@@ -74,7 +74,7 @@ export default class CanvasFloatPlugin extends Plugin {
 
   restoreElement(floatingContainer: HTMLElement, originalElement: HTMLElement) {
     originalElement.empty();
-    originalElement.appendChild(floatingContainer.children[0].cloneNode(true));
+    originalElement.appendChild(floatingContainer.children[0].children[0].cloneNode(true));
     document.body.removeChild(floatingContainer);
     this.floatingElement = null;
     this.originalElement = null;
@@ -125,8 +125,8 @@ export default class CanvasFloatPlugin extends Plugin {
       height = windowHeight * 0.5;
       width = height * this.aspectRatio;
     }
-    container.style.width = `${width}px`;
-    container.style.height = `${height}px`;
+    container.style.setProperty('--width', `${width}px`)
+    container.style.setProperty('--height', `${height}px`)
   }
 
   addResizeHandlers(container: HTMLElement) {
@@ -179,12 +179,12 @@ export default class CanvasFloatPlugin extends Plugin {
 
     const rect = this.floatingElement.getBoundingClientRect();
     if (this.resizeDirection === 'corner') {
-      this.floatingElement.style.width = `${e.clientX - rect.left}px`;
-      this.floatingElement.style.height = `${rect.bottom - e.clientY}px`;
+      this.floatingElement.style.setProperty('--width', `${e.clientX - rect.left}px`);
+      this.floatingElement.style.setProperty('--height', `${rect.bottom - e.clientY}px`);
     } else if (this.resizeDirection === 'right') {
-      this.floatingElement.style.width = `${e.clientX - rect.left}px`;
+      this.floatingElement.style.setProperty('--width', `${e.clientX - rect.left}px`);
     } else if (this.resizeDirection === 'top') {
-      this.floatingElement.style.height = `${rect.bottom - e.clientY}px`;
+      this.floatingElement.style.setProperty('--height', `${rect.bottom - e.clientY}px`);
     }
   }
 
diff --git a/styles.css b/styles.css
index c1b5662..412d628 100644
--- a/styles.css
+++ b/styles.css
@@ -53,6 +53,8 @@
     box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
     overflow: auto;
     resize: none;
+    width: var(--width);
+    height: var(--height);
   }
 
   .floating-container[data-resize-direction='corner'] {