From 3dc2ad570ae43feba1aa046f4ab7393bba07985f Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Tue, 5 Nov 2024 15:00:23 +0200
Subject: [PATCH] fix: set max-height on popover overlay to not overflow
 viewport (#8095)

---
 packages/popover/src/vaadin-popover-overlay.js |  3 +++
 packages/popover/test/basic.test.js            | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/packages/popover/src/vaadin-popover-overlay.js b/packages/popover/src/vaadin-popover-overlay.js
index 92fd465194..4f2d7570f8 100644
--- a/packages/popover/src/vaadin-popover-overlay.js
+++ b/packages/popover/src/vaadin-popover-overlay.js
@@ -48,10 +48,13 @@ class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM
         [part='overlay'] {
           position: relative;
           overflow: visible;
+          max-height: 100%;
         }
 
         [part='content'] {
           overflow: auto;
+          box-sizing: border-box;
+          max-height: 100%;
           width: var(--_vaadin-popover-content-width);
           height: var(--_vaadin-popover-content-height);
         }
diff --git a/packages/popover/test/basic.test.js b/packages/popover/test/basic.test.js
index 2d4eb9a279..e39ec93ed2 100644
--- a/packages/popover/test/basic.test.js
+++ b/packages/popover/test/basic.test.js
@@ -413,6 +413,24 @@ describe('popover', () => {
     });
   });
 
+  describe('content overflow', () => {
+    beforeEach(async () => {
+      popover.renderer = (root) => {
+        root.textContent = new Array(1000).fill('foo').join(' ');
+      };
+      popover.opened = true;
+      await nextRender();
+    });
+
+    it('should limit overlay height if content overflows the viewport', () => {
+      expect(overlay.$.overlay.getBoundingClientRect().height).to.equal(overlay.getBoundingClientRect().height);
+    });
+
+    it('should limit content height if content overflows the viewport', () => {
+      expect(overlay.$.content.getBoundingClientRect().height).to.equal(overlay.getBoundingClientRect().height);
+    });
+  });
+
   describe('closed event', () => {
     beforeEach(async () => {
       popover.opened = true;