Remove undefined dimensions from properties

Author: binarykitchen

package-lock.json

@@ -88,7 +88,7 @@
     "@tsconfig/node22": "22.0.2",
     "@tsconfig/strictest": "2.0.7",
     "@types/defined": "1.0.2",
-    "@types/node": "24.10.0",
+    "@types/node": "24.10.1",
     "@types/superagent": "8.1.9",
     "@types/ua-parser-js": "0.7.39",
     "@vitest/eslint-plugin": "1.4.2",
@@ -100,14 +100,14 @@
     "eslint-plugin-de-morgan": "2.0.0",
     "eslint-plugin-depend": "1.3.1",
     "eslint-plugin-import-x": "4.16.1",
-    "eslint-plugin-package-json": "0.65.3",
+    "eslint-plugin-package-json": "0.68.0",
     "eslint-plugin-promise": "7.2.1",
     "eslint-plugin-regexp": "2.10.0",
     "eslint-plugin-security": "3.0.1",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-storybook": "9.1.16",
     "globals": "16.5.0",
-    "jsdom": "27.1.0",
+    "jsdom": "27.2.0",
     "msw": "2.11.6",
     "msw-storybook-addon": "2.0.6",
     "prettier": "3.6.2",

package.json

@@ -342,14 +342,16 @@ class Container extends Despot {
     if (this.options.video.stretch) {
       this.removeDimensions();
     } else if (this.containerElement) {
-      let dimension = useFullWidth(this.options.video.mobileBreakPoint);
+      let widthDimension = useFullWidth(this.options.video.mobileBreakPoint);
 
-      if (!dimension) {
-        dimension = this.visuals.getRecorderWidth(true);
+      if (!widthDimension) {
+        widthDimension = this.visuals.getRecorderWidth(true);
       }
 
-      if (dimension?.value) {
-        this.containerElement.style.width = `${dimension.value}${dimension.unit}`;
+      if (widthDimension?.value) {
+        this.containerElement.style.width = `${widthDimension.value}${widthDimension.unit}`;
+      } else {
+        this.containerElement.style.removeProperty("width");
       }
     }
   }

src/wrappers/container.ts

@@ -129,10 +129,14 @@ class Visuals extends Despot {
 
       if (widthDimension) {
         this.visualsElement.style.width = `${widthDimension.value}${widthDimension.unit}`;
+      } else {
+        this.visualsElement.style.removeProperty("width");
       }
 
       if (heightDimension) {
         this.visualsElement.style.height = `${heightDimension.value}${heightDimension.unit}`;
+      } else {
+        this.visualsElement.style.removeProperty("height");
       }
     }
   }

src/wrappers/visuals.ts

@@ -175,10 +175,14 @@ class Notifier extends Despot {
 
       if (widthDimension) {
         this.notifyElement.style.width = `${widthDimension.value}${widthDimension.unit}`;
+      } else {
+        this.notifyElement.style.removeProperty("width");
       }
 
       if (heightDimension) {
         this.notifyElement.style.height = `${heightDimension.value}${heightDimension.unit}`;
+      } else {
+        this.notifyElement.style.removeProperty("height");
       }
     }
   }

src/wrappers/visuals/notifier.ts

@@ -1330,12 +1330,15 @@ class Recorder extends Despot {
 
     if (this.options.video.stretch || widthDimension) {
       this.recorderElement.style.width = "100%";
+      this.recorderElement.style.removeProperty("height");
     } else {
       if (this.options.video.width) {
         const recorderWidth = this.getRecorderWidth(true);
 
         if (recorderWidth?.value) {
           this.recorderElement.width = recorderWidth.value;
+        } else {
+          this.recorderElement.style.removeProperty("width");
         }
       }
 
@@ -1344,6 +1347,8 @@ class Recorder extends Despot {
 
         if (recorderHeight.value) {
           this.recorderElement.height = recorderHeight.value;
+        } else {
+          this.recorderElement.style.removeProperty("height");
         }
       }
     }