fix(ui/overlays): set <dialog> wrapping el padding to 0

.changeset/eleven-walls-vanish.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+Set padding of <dialog> to 0 so it doesn't show a weird 1em width/height box due to user agent styles.

package-lock.json

@@ -22518,7 +22518,7 @@
     },
     "packages/ajax": {
       "name": "@lion/ajax",
-      "version": "1.1.2",
+      "version": "1.1.3",
       "license": "MIT"
     },
     "packages/singleton-manager": {
@@ -22527,7 +22527,7 @@
     },
     "packages/ui": {
       "name": "@lion/ui",
-      "version": "0.1.4",
+      "version": "0.1.5",
       "license": "MIT",
       "dependencies": {
         "@bundled-es-modules/message-format": "^6.0.4",

packages/ui/components/overlays/src/OverlayController.js

@@ -575,7 +575,8 @@ export class OverlayController extends EventTarget {
     // N.B. position: fixed is needed to escape out of 'overflow: hidden'
     // We give a high z-index for non-modal dialogs, so that we at least win from all siblings of our
     // parent stacking context
-    wrappingDialogElement.style.cssText = `display:none; z-index: ${this.config.zIndex};`;
+    // padding reset so we don't get a weird dialog visual square showing up
+    wrappingDialogElement.style.cssText = `display:none; z-index: ${this.config.zIndex}; padding: 0;`;
     this.__wrappingDialogNode = wrappingDialogElement;
 
     /**

packages/ui/components/overlays/test/OverlayController.test.js

@@ -21,7 +21,7 @@ import { createShadowHost } from '../test-helpers/createShadowHost.js';
  * @typedef {import('../types/OverlayConfig.js').ViewportPlacement} ViewportPlacement
  */
 
-const wrappingDialogNodeStyle = 'display: none; z-index: 9999;';
+const wrappingDialogNodeStyle = 'display: none; z-index: 9999; padding: 0px;';
 
 /**
  * Make sure that all browsers serialize html in a similar way