test: create E2E test

e2e/popover.e2e.ts

@@ -13,3 +13,15 @@ test("Should render close button", async ({ page }) => {
 
   await expect(page).toHaveScreenshot();
 });
+
+test("Should render overflowing popover", async ({ page }) => {
+  await page.goto(testUrl);
+
+  const button = page.getByTestId("popover-menu-display-overflow");
+  await button.click();
+
+  // Wait for animation
+  await page.waitForTimeout(750);
+
+  await expect(page).toHaveScreenshot();
+});

src/routes/(split)/components/popover/+page.md

@@ -5,6 +5,10 @@
     let button: HTMLButtonElement | undefined;
     let visible2 = false;
     let button2: HTMLButtonElement | undefined;
+    let visible3 = false;
+    let button3: HTMLButtonElement | undefined;
+
+    const customArray = Array.from({length: 500}, (_, i) => i + 1);
 </script>
 
 # Popover
@@ -51,6 +55,23 @@ next to an anchor — commonly a button — which initiates its display.
             </span>Logout
         </div>
     </Popover>
+    <button
+        data-tid="popover-menu-display-overflow"
+        class="icon-only toggle"
+        bind:this={button3}
+        on:click={() => (visible3 = !visible3)}
+    >  
+        <IconMenu size={40}/>
+    </button>
+    <Popover bind:visible={visible3} anchor={button3} closeButton invisibleBackdrop direction="rtl">
+        {#each customArray as item}
+            <div class="account">
+                <span class="account_icon">
+                    <IconUser size={34} />
+                </span>Account {item}
+            </div>
+        {/each}
+    </Popover>
 </div>
 
 <style>
@@ -79,6 +100,10 @@ next to an anchor — commonly a button — which initiates its display.
 
 The popover placement will be below the anchor element, either from left to right (default)
 or from right to left.
+If the popover should overflow the viewport, it will be automatically resized to fit within the viewport, 
+and the content will be scrollable.
+
+```html
 
 ```javascript
 <script lang="ts">