From 0140a7631ca40ac3653d11026b7c123ece84e017 Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Fri, 1 Mar 2024 17:27:50 -0500
Subject: [PATCH] Adjust menu popup behavior contextually (#20718)

---
 app/assets/stylesheets/billboards.scss             | 14 +++++++++-----
 .../utilities/billboardInteractivity.jsx           |  6 ++++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/billboards.scss b/app/assets/stylesheets/billboards.scss
index 55110f604..89685b5f8 100644
--- a/app/assets/stylesheets/billboards.scss
+++ b/app/assets/stylesheets/billboards.scss
@@ -58,16 +58,13 @@
   animation: popoverEnter 0.5s;
   box-shadow: 0 0 100px 60px rgba(0, 0, 0, 0.2) !important;
   max-height: calc(100vh - var(--header-height));
-  overflow-y: auto;
   .text-styles {
     padding-top: var(--su-4);
     padding-bottom: var(--su-4);
     font-size: calc(0.8em + 0.58vw);
     max-width: calc(var(--site-width) - var(--su-8));
-  }
-  .sponsorship-dropdown {
-    top: auto;
-    bottom: var(--su-8);
+    overflow-y: auto;
+    max-height: calc(100vh - var(--header-height) - var(--su-8));
   }
   @media (min-width: $breakpoint-xl) {
     .crayons-sponsorship__header,
@@ -80,6 +77,13 @@
   }
 }
 
+.popover-billboard--menuopenupwards {
+  .sponsorship-dropdown {
+    top: auto;
+    bottom: var(--su-8);
+  }
+}
+
 .hide-popover-billboard .popover-billboard {
   display: none;
 }
diff --git a/app/javascript/utilities/billboardInteractivity.jsx b/app/javascript/utilities/billboardInteractivity.jsx
index b82449560..6b1a555a2 100644
--- a/app/javascript/utilities/billboardInteractivity.jsx
+++ b/app/javascript/utilities/billboardInteractivity.jsx
@@ -21,6 +21,12 @@ export function setupBillboardInteractivity() {
 
         sponsorshipDropdownButton.dataset.initialized = 'true';
       }
+
+      const popoverParent = sponsorshipDropdownButton.closest('.popover-billboard');
+      if (popoverParent &&
+        sponsorshipDropdownButton.getBoundingClientRect().top > window.innerHeight / 2) {
+        popoverParent.classList.add('popover-billboard--menuopenupwards');
+      }
     });
   }
   const sponsorshipCloseButtons = document.querySelectorAll(