From 6dba2e4792ae6f633b8e1e090517ee834a6a961b Mon Sep 17 00:00:00 2001
From: Tanuj Mittal <tamitta@microsoft.com>
Date: Wed, 14 Apr 2021 16:56:53 -0700
Subject: [PATCH] Fix height for SandboxFrame (#676)

---
 .../NotebookRenderer/outputs/SandboxFrame.tsx | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxFrame.tsx b/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxFrame.tsx
index 88ef1703b..dcfdbafa8 100644
--- a/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxFrame.tsx
+++ b/src/Explorer/Notebook/NotebookRenderer/outputs/SandboxFrame.tsx
@@ -15,6 +15,7 @@ interface SandboxFrameState {
 
 export class SandboxFrame extends React.PureComponent<SandboxFrameProps, SandboxFrameState> {
   private resizeObserver: ResizeObserver;
+  private mutationObserver: MutationObserver;
 
   constructor(props: SandboxFrameProps) {
     super(props);
@@ -43,22 +44,26 @@ export class SandboxFrame extends React.PureComponent<SandboxFrameProps, Sandbox
 
   componentWillUnmount(): void {
     this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
   }
 
   onFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
     const doc = (event.target as HTMLIFrameElement).contentDocument;
     copyStyles(document, doc);
 
-    this.setState({
-      frameBody: doc.body,
-      frameHeight: doc.body.scrollHeight,
-    });
+    this.setState({ frameBody: doc.body });
 
-    this.resizeObserver = new ResizeObserver(() =>
-      this.setState({
-        frameHeight: this.state.frameBody.scrollHeight,
-      })
-    );
-    this.resizeObserver.observe(doc.body);
+    this.mutationObserver = new MutationObserver(() => {
+      const bodyFirstElementChild = this.state.frameBody?.firstElementChild;
+      if (!this.resizeObserver && bodyFirstElementChild) {
+        this.resizeObserver = new ResizeObserver(() =>
+          this.setState({
+            frameHeight: this.state.frameBody?.firstElementChild.scrollHeight,
+          })
+        );
+        this.resizeObserver.observe(bodyFirstElementChild);
+      }
+    });
+    this.mutationObserver.observe(doc.body, { childList: true });
   }
 }