diff --git a/frontend/app/src/components/Menu.svelte b/frontend/app/src/components/Menu.svelte index 8913df35a8..4224392afe 100644 --- a/frontend/app/src/components/Menu.svelte +++ b/frontend/app/src/components/Menu.svelte @@ -22,7 +22,8 @@ border-radius: var(--rd); border: var(--bw) solid var(--menu-bd); max-height: 80vh; - overflow-y: auto; + height: var(--override-height); + @include nice-scrollbar(); @include mobile() { &.centered { diff --git a/frontend/app/src/components/home/CryptoSelector.svelte b/frontend/app/src/components/home/CryptoSelector.svelte index bff9153bcd..9b685d5bc9 100644 --- a/frontend/app/src/components/home/CryptoSelector.svelte +++ b/frontend/app/src/components/home/CryptoSelector.svelte @@ -88,6 +88,7 @@ .token-selector-trigger { display: flex; + cursor: pointer; align-items: center; gap: $sp1; } diff --git a/frontend/app/src/stores/menu.ts b/frontend/app/src/stores/menu.ts index 81ec063cc0..9721784064 100644 --- a/frontend/app/src/stores/menu.ts +++ b/frontend/app/src/stores/menu.ts @@ -17,6 +17,7 @@ document.body.appendChild(menuAnchor); function close(menu: HTMLElement | undefined): HTMLElement | undefined { if (menu !== undefined) { + menu.style.removeProperty("--override-height"); if (!menuAnchor) { // debug logging - will remove later console.error("trying to remove menu when menu anchor is null"); @@ -43,6 +44,7 @@ export const menuStore = { if (menu === undefined) return menu; const elementRect = menu.getBoundingClientRect(); + const originalHeight = elementRect.height; const dim = centered && get(mobileWidth) @@ -50,6 +52,7 @@ export const menuStore = { : boundsCheck( triggerRect, derivePosition(triggerRect, elementRect, position, align, gutter), + gutter, ); menu.style.setProperty("left", `${dim.x}px`); @@ -57,6 +60,9 @@ export const menuStore = { // for landing pages we need to offset based on the window scroll // for the main app this will always be 0 so it's a no-op menu.style.setProperty("top", `${dim.y + window.scrollY}px`); + if (originalHeight !== dim.h) { + menu.style.setProperty("--override-height", `${dim.h}px`); + } return menu; }), diff --git a/frontend/app/src/utils/alignment.ts b/frontend/app/src/utils/alignment.ts index 130dc1f2d7..75b06287d9 100644 --- a/frontend/app/src/utils/alignment.ts +++ b/frontend/app/src/utils/alignment.ts @@ -115,7 +115,7 @@ function viewportDimensions(): { w: number; h: number } { // Once the coordinates have been figured out we need to check whether the element // overflows the bounds of the screen. It it does we need make adjustments -export function boundsCheck(trigger: DOMRect, dim: Dimensions): Dimensions { +export function boundsCheck(trigger: DOMRect, dim: Dimensions, gutter = 8): Dimensions { const viewport = viewportDimensions(); const right = dim.x + dim.w; const left = dim.x; @@ -129,11 +129,11 @@ export function boundsCheck(trigger: DOMRect, dim: Dimensions): Dimensions { let y = dim.y; if (topOverflow) { - y = dim.y + dim.h + trigger.height; + y = dim.y + dim.h + trigger.height + gutter * 2; } if (bottomOverflow) { - y = dim.y - dim.h - trigger.height; + y = dim.y - dim.h - trigger.height - gutter * 2; } if (rightOverflow) { @@ -144,6 +144,18 @@ export function boundsCheck(trigger: DOMRect, dim: Dimensions): Dimensions { x = dim.x + dim.w + trigger.width; } + // make sure we haven't popped off the top + if (y < 0) { + dim.h = dim.h + y; + y = 0; + } + + // make sure we haven't popped off the bottom + if (y + dim.h > viewport.h) { + const diff = y + dim.h - viewport.h; + dim.h = dim.h - diff; + } + return { ...dim, x,