fix: add ability to observe iframe content height on content load and change (#30942)

These changes allow the ability to adapt to update/resize the unit content after loading and interaction. Main cases were with Open Response Assessment (ORA) and Discussion blocks.

lms/templates/courseware/courseware-chromeless.html

@@ -118,7 +118,7 @@ ${HTML(fragment.foot_html())}
   (function() {
     // If this view is rendered in an iframe within the learning microfrontend app
     // it will report the height of its contents to the parent window when the
-    // document loads, window resizes, or DOM resizes.
+    // document loads, window resizes, or DOM mutates.
     if (window !== window.parent) {
       document.body.className += ' view-in-mfe';
       var lastHeight = window.offsetHeight;
@@ -126,7 +126,7 @@ ${HTML(fragment.foot_html())}
       var contentElement = document.getElementById('content');
 
       function dispatchResizeMessage(event) {
-        // Note: event is actually an Array of ResizeObserverEntry objects when fired from the ResizeObserver
+        // Note: event is actually an Array of MutationRecord objects when fired from the MutationObserver
         var isLoadEvent = event.type === 'load';
         var newHeight = contentElement.offsetHeight;
         var newWidth = contentElement.offsetWidth;
@@ -189,8 +189,11 @@ ${HTML(fragment.foot_html())}
         window.scrollTo(0, 0);
       }
 
-      const observer = new ResizeObserver(dispatchResizeMessage);
-      observer.observe(document.body);
+      // Create an observer instance linked to the callback function
+      const observer = new MutationObserver(dispatchResizeMessage);
+
+      // Start observing the target node for configured mutations
+      observer.observe(document.body, { attributes: true, childList: true, subtree: true });
 
       window.addEventListener('load', dispatchResizeMessage);
       window.addEventListener('resize', dispatchResizeMessage);