Menu pos (#4968)

open-chat-labs · Dec 7, 2023 · d53e94a · d53e94a
1 parent ceedd96
commit d53e94a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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,20 +44,25 @@ export const menuStore = {
             if (menu === undefined) return menu;
 
             const elementRect = menu.getBoundingClientRect();
+            const originalHeight = elementRect.height;
 
             const dim =
                 centered && get(mobileWidth)
                     ? centerOfScreen(elementRect)
                     : boundsCheck(
                           triggerRect,
                           derivePosition(triggerRect, elementRect, position, align, gutter),
+                          gutter,
                       );
 
             menu.style.setProperty("left", `${dim.x}px`);
 
             // 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
@@ -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,