diff --git a/e2e/page-banner.e2e.ts-snapshots/Should-display-default-behavior-1-Google-Chrome-linux.png b/e2e/page-banner.e2e.ts-snapshots/Should-display-default-behavior-1-Google-Chrome-linux.png index 7237a659..bf412011 100644 Binary files a/e2e/page-banner.e2e.ts-snapshots/Should-display-default-behavior-1-Google-Chrome-linux.png and b/e2e/page-banner.e2e.ts-snapshots/Should-display-default-behavior-1-Google-Chrome-linux.png differ diff --git a/e2e/popover.e2e.ts b/e2e/popover.e2e.ts index 7f305d26..54eaae15 100644 --- a/e2e/popover.e2e.ts +++ b/e2e/popover.e2e.ts @@ -13,3 +13,19 @@ 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); + + //scroll in div that has test id popover-content + const content = page.getByTestId("popover-content"); + await content?.evaluate((el) => el.scrollBy(0, 100)); + + await expect(page).toHaveScreenshot(); +}); diff --git a/e2e/popover.e2e.ts-snapshots/Should-render-close-button-1-Google-Chrome-linux.png b/e2e/popover.e2e.ts-snapshots/Should-render-close-button-1-Google-Chrome-linux.png index 5a8a0a1f..15462a5f 100644 Binary files a/e2e/popover.e2e.ts-snapshots/Should-render-close-button-1-Google-Chrome-linux.png and b/e2e/popover.e2e.ts-snapshots/Should-render-close-button-1-Google-Chrome-linux.png differ diff --git a/e2e/popover.e2e.ts-snapshots/Should-render-overflowing-popover-1-Google-Chrome-linux.png b/e2e/popover.e2e.ts-snapshots/Should-render-overflowing-popover-1-Google-Chrome-linux.png new file mode 100644 index 00000000..697e6fd4 Binary files /dev/null and b/e2e/popover.e2e.ts-snapshots/Should-render-overflowing-popover-1-Google-Chrome-linux.png differ diff --git a/src/lib/components/Popover.svelte b/src/lib/components/Popover.svelte index 31f2d300..156e6e22 100644 --- a/src/lib/components/Popover.svelte +++ b/src/lib/components/Popover.svelte @@ -58,7 +58,9 @@ > {/if} - +
+ +
{/if} @@ -88,6 +90,10 @@ // limited by `100vw - right padding` max-width: calc(100vw - var(--padding)); + max-height: calc( + var(--full-vh, 100vh) - var(--popover-top) - calc(6 * var(--padding)) + ); + width: fit-content; height: auto; @@ -100,6 +106,10 @@ border-radius: var(--border-radius); + @supports (height: 100dvh) { + --full-vh: 100dvh; + } + &.rtl { left: auto; right: var(--popover-right); @@ -113,4 +123,8 @@ .close { align-self: flex-end; } + + .popover-content { + overflow-y: auto; + } diff --git a/src/lib/icons/IconAccountsPage.svelte b/src/lib/icons/IconAccountsPage.svelte index 191613a1..2835448e 100644 --- a/src/lib/icons/IconAccountsPage.svelte +++ b/src/lib/icons/IconAccountsPage.svelte @@ -13,226 +13,95 @@ > + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + - - + + - - + + - - - diff --git a/src/lib/icons/IconCanistersPage.svelte b/src/lib/icons/IconCanistersPage.svelte index e6f773fe..de8edd53 100644 --- a/src/lib/icons/IconCanistersPage.svelte +++ b/src/lib/icons/IconCanistersPage.svelte @@ -11,224 +11,108 @@ fill="none" xmlns="http://www.w3.org/2000/svg" > - - - - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + - - + + - - + + - - + + + - - + + - - - diff --git a/src/lib/icons/IconNeuronsPage.svelte b/src/lib/icons/IconNeuronsPage.svelte index 0a0e2dae..b67deeb4 100644 --- a/src/lib/icons/IconNeuronsPage.svelte +++ b/src/lib/icons/IconNeuronsPage.svelte @@ -13,134 +13,71 @@ > + + - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + - + diff --git a/src/lib/icons/IconNotificationPage.svelte b/src/lib/icons/IconNotificationPage.svelte index 0cfc8ff7..4ed9aae4 100644 --- a/src/lib/icons/IconNotificationPage.svelte +++ b/src/lib/icons/IconNotificationPage.svelte @@ -7,102 +7,80 @@ + + + + - - - - - - - - - - - - - + + + - - - - - + + + - - + + - - + + diff --git a/src/lib/icons/IconProposalsPage.svelte b/src/lib/icons/IconProposalsPage.svelte index da4bcbd1..a6943993 100644 --- a/src/lib/icons/IconProposalsPage.svelte +++ b/src/lib/icons/IconProposalsPage.svelte @@ -14,177 +14,77 @@ + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + - - + + - - + + diff --git a/src/lib/icons/IconQRCode.svelte b/src/lib/icons/IconQRCode.svelte index 10044f02..7379de53 100644 --- a/src/lib/icons/IconQRCode.svelte +++ b/src/lib/icons/IconQRCode.svelte @@ -13,271 +13,246 @@ > - - - - + + - - - - - - - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/src/lib/icons/IconSettingsPage.svelte b/src/lib/icons/IconSettingsPage.svelte index 37dd67ab..a5da537d 100644 --- a/src/lib/icons/IconSettingsPage.svelte +++ b/src/lib/icons/IconSettingsPage.svelte @@ -13,315 +13,140 @@ > + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - + + - + - - + + - - + + - + - + diff --git a/src/routes/(split)/components/popover/+page.md b/src/routes/(split)/components/popover/+page.md index ed3ecc68..d8d8a98d 100644 --- a/src/routes/(split)/components/popover/+page.md +++ b/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); # Popover @@ -51,6 +55,23 @@ next to an anchor — commonly a button — which initiates its display. Logout + + + {#each customArray as item} + + {/each} +