From 7e5b99aa849a377a85e3aa152c370af957e8c7ef Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Tue, 18 Apr 2023 10:37:11 +0100
Subject: [PATCH] Fix Help Menu (#10257)

* Fix Help Menu

* PR Feedback

* linting
---
 packages/bbui/src/Actions/position_dropdown.js     | 14 +++++++++++---
 packages/bbui/src/Popover/Popover.svelte           |  2 ++
 .../builder/src/components/common/HelpMenu.svelte  |  7 +------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index ecbb5747c4..2cb681670b 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -10,7 +10,14 @@ export default function positionDropdown(element, opts) {
 
   // Updates the position of the dropdown
   const updatePosition = opts => {
-    const { anchor, align, maxWidth, useAnchorWidth, offset = 5 } = opts
+    const {
+      anchor,
+      align,
+      maxHeight,
+      maxWidth,
+      useAnchorWidth,
+      offset = 5,
+    } = opts
     if (!anchor) {
       return
     }
@@ -31,10 +38,11 @@ export default function positionDropdown(element, opts) {
       styles.top = anchorBounds.top
     } else if (window.innerHeight - anchorBounds.bottom < 100) {
       styles.top = anchorBounds.top - elementBounds.height - offset
-      styles.maxHeight = 240
+      styles.maxHeight = maxHeight || 240
     } else {
       styles.top = anchorBounds.bottom + offset
-      styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
+      styles.maxHeight =
+        maxHeight || window.innerHeight - anchorBounds.bottom - 20
     }
 
     // Determine horizontal styles
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 081e3a34df..6ba67ca0f5 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -14,6 +14,7 @@
   export let align = "right"
   export let portalTarget
   export let maxWidth
+  export let maxHeight
   export let open = false
   export let useAnchorWidth = false
   export let dismissible = true
@@ -64,6 +65,7 @@
       use:positionDropdown={{
         anchor,
         align,
+        maxHeight,
         maxWidth,
         useAnchorWidth,
         offset,
diff --git a/packages/builder/src/components/common/HelpMenu.svelte b/packages/builder/src/components/common/HelpMenu.svelte
index 75c53f0ca5..274565b255 100644
--- a/packages/builder/src/components/common/HelpMenu.svelte
+++ b/packages/builder/src/components/common/HelpMenu.svelte
@@ -13,12 +13,7 @@
 
 <div bind:this={popoverAnchor} class="help">
   <button class="openMenu" on:click={show}>Help</button>
-  <Popover
-    class="helpMenuPopoverOverride"
-    bind:show
-    bind:hide
-    anchor={popoverAnchor}
-  >
+  <Popover maxHeight={1000} bind:show bind:hide anchor={popoverAnchor}>
     <nav class="helpMenu">
       <div class="header">
         <Heading size="XS">Help resources</Heading>