use margin property

Author: JesmoDev

packages/uui-popover-container/lib/uui-popover-container.element.ts

@@ -74,26 +74,6 @@ export class UUIPopoverContainerElement extends LitElement {
     this.removeEventListener('beforetoggle', this.#onBeforeToggle);
   }
 
-  #updatePadding = () => {
-    const oppositeSides: Record<string, string> = {
-      top: 'bottom',
-      bottom: 'top',
-      left: 'right',
-      right: 'left',
-    };
-
-    // find the side excluding start/end
-    let side = this._actualPlacement.split('-')[0];
-    // find the opposite side
-    side = oppositeSides[side] || side;
-    // capitalize the side
-    side = side.charAt(0).toUpperCase() + side.slice(1);
-
-    const paddingSide = `padding${side}`;
-    this.style.padding = '0';
-    (this.style as any)[paddingSide] = `10px`;
-  };
-
   #onBeforeToggle = async (event: any) => {
     this.#targetElement = this.#findAncestorWithAttribute(
       this,
@@ -273,6 +253,26 @@ export class UUIPopoverContainerElement extends LitElement {
     this.style.opacity = '1';
   };
 
+  #updatePadding = () => {
+    const oppositeSides: Record<string, string> = {
+      top: 'bottom',
+      bottom: 'top',
+      left: 'right',
+      right: 'left',
+    };
+
+    // find the side excluding start/end
+    let side = this._actualPlacement.split('-')[0];
+    // find the opposite side
+    side = oppositeSides[side] || side;
+    // capitalize the side
+    side = side.charAt(0).toUpperCase() + side.slice(1);
+
+    const paddingSide = `padding${side}`;
+    this.style.padding = '0';
+    (this.style as any)[paddingSide] = `${this.margin}px`;
+  };
+
   #flipPlacement() {
     const [direction, position] = this._actualPlacement.split('-');
     const oppositeDirection =