From b54dff3195e1f1e2ed89ff3f394c019009c2bf80 Mon Sep 17 00:00:00 2001 From: Muhammad Faraz Maqsood Date: Fri, 5 Sep 2025 21:37:03 +0500 Subject: [PATCH 1/2] fix: modal size for lti content - dialogClassName was working with Modal from paragon, but after paragon v23 upgrade. We replaced Modal with ModalDialog with which dialogClassName doesn't work. - So, replace dialogClassName with simple className to apply same styles. --- src/courseware/course/sequence/Unit/ContentIFrame.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/courseware/course/sequence/Unit/ContentIFrame.jsx b/src/courseware/course/sequence/Unit/ContentIFrame.jsx index bc77182506..88d39fe125 100644 --- a/src/courseware/course/sequence/Unit/ContentIFrame.jsx +++ b/src/courseware/course/sequence/Unit/ContentIFrame.jsx @@ -76,7 +76,7 @@ const ContentIFrame = ({ {modalOptions.isOpen && ( Date: Tue, 9 Sep 2025 16:31:37 +0500 Subject: [PATCH 2/2] fix: height for lti modal --- src/index.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.scss b/src/index.scss index 37623bb29a..e7032faabc 100755 --- a/src/index.scss +++ b/src/index.scss @@ -367,20 +367,20 @@ // window (retaining padding around the edge). Bootstrap modals don't have a full-screen // size like this. Because of the hack below around react-focus-on's div, it would be better long-term to pull this into Paragon and perhaps call it "modal-full" or something like that. .modal-lti { - height: 100%; + height: 80vh; max-width: 100% !important; // I don't like this. We need to set a height of 100% on a div created by react-focus-on, a // package we use in our Modal. That div has no class name or ID, so instead we're uniquely // identifying it by based on a unique attribute it has which its siblings don't share. > div[data-focus-lock-disabled="false"] { - height: 100%; + height: 80vh; } // Along with setting the height of modal-content's parent div from react-focus-on, we need to // set modal-content's height as well to get the modal to expand to full-screen height. .modal-content { - height: 100%; + height: 80vh; } }