From 6b6fb77a1d18be1485eee029e275480f7e6b0d48 Mon Sep 17 00:00:00 2001
From: Peter Kulko <peter.kulko@raccoongang.com>
Date: Fri, 15 Nov 2024 13:32:50 +0200
Subject: [PATCH] refactor: corrected xblock dropdown menu

---
 cms/static/js/views/pages/container.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
index 710d078098a0..523af8af4537 100644
--- a/cms/static/js/views/pages/container.js
+++ b/cms/static/js/views/pages/container.js
@@ -483,21 +483,18 @@ function($, _, Backbone, gettext, BasePage,
             // not present yet during the domReady event, we have to handle displaying it ourselves.
             subMenu.classList.toggle('is-shown');
 
-            try {
-                if (this.options.isIframeEmbed) {
-                    window.parent.postMessage(
-                        {
-                            type: 'toggleDropdownMenu',
-                            message: 'Sends a message when the dropdown menu is toggled',
-                            payload: {
-                                subMenuHeight: subMenu.offsetHeight,
-                            }
-                        }, document.referrer
-                    );
-                }
-            } catch (e) {
-                console.error(e);
+            // Calculate the viewport height and the dropdown menu height.
+            // Check if the dropdown would overflow beyond the iframe height based on the user's click position.
+            // If the dropdown overflows, adjust its position to display above the click point.
+            const courseUnitXBlockIframeHeight = window.innerHeight;
+            const courseXBlockDropdownHeight = subMenu.offsetHeight;
+            const clickYPosition = event.clientY;
+
+            if ((courseXBlockDropdownHeight + clickYPosition) > courseUnitXBlockIframeHeight) {
+                // Move the dropdown menu upward to prevent it from overflowing out of the viewport.
+                subMenu.style.top =  `-${courseXBlockDropdownHeight}px`;
             }
+
             // if propagation is not stopped, the event will bubble up to the
             // body element, which will close the dropdown.
             event.stopPropagation();