fix: enforce zero padding on popover no-padding theme variant (#9845)

Author: web-padawan

packages/popover/src/styles/vaadin-popover-overlay-base-styles.js

@@ -50,7 +50,7 @@ const popoverOverlay = css`
   }
 
   :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+    padding: 0 !important;
   }
 
   /* Increase the area of the popover so the pointer can go from the target directly to it. */

packages/popover/test/visual/base/popover.test.js

@@ -86,10 +86,22 @@ describe('popover', () => {
     });
   });
 
-  it('no-padding', async () => {
-    element.setAttribute('theme', 'no-padding');
-    target.click();
-    await nextRender();
-    await visualDiff(div, 'no-padding');
+  describe('no-padding', () => {
+    before(() => {
+      const contentStyles = new CSSStyleSheet();
+      contentStyles.insertRule('vaadin-popover::part(content) { padding: 20px; }');
+      document.adoptedStyleSheets = [contentStyles];
+    });
+
+    after(() => {
+      document.adoptedStyleSheets = [];
+    });
+
+    it('no-padding', async () => {
+      element.setAttribute('theme', 'no-padding');
+      target.click();
+      await nextRender();
+      await visualDiff(div, 'no-padding');
+    });
   });
 });

packages/popover/test/visual/lumo/popover.test.js

@@ -56,11 +56,23 @@ describe('popover', () => {
     });
   });
 
-  it('no-padding', async () => {
-    element.setAttribute('theme', 'no-padding');
-    target.click();
-    await nextRender();
-    await visualDiff(div, 'no-padding');
+  describe('no-padding', () => {
+    before(() => {
+      const contentStyles = new CSSStyleSheet();
+      contentStyles.insertRule('vaadin-popover::part(content) { padding: 20px; }');
+      document.adoptedStyleSheets = [contentStyles];
+    });
+
+    after(() => {
+      document.adoptedStyleSheets = [];
+    });
+
+    it('no-padding', async () => {
+      element.setAttribute('theme', 'no-padding');
+      target.click();
+      await nextRender();
+      await visualDiff(div, 'no-padding');
+    });
   });
 
   it('custom offset', async () => {

packages/popover/theme/lumo/vaadin-popover-styles.js

@@ -20,7 +20,7 @@ const popoverOverlay = css`
   }
 
   :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+    padding: 0 !important;
   }
 
   :host([theme~='arrow']) {

packages/vaadin-lumo-styles/src/components/popover-overlay.css

@@ -36,7 +36,7 @@
   }
 
   :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+    padding: 0 !important;
   }
 
   [part='arrow'] {