Merge pull request #14140 from desktop/fix-markdown-height

Fix height issues with Markdown component

app/src/ui/lib/sandboxed-markdown.tsx

@@ -147,15 +147,17 @@ export class SandboxedMarkdown extends React.PureComponent<
      */
     const docEl = frameRef.contentDocument.documentElement.querySelector(
       '#content'
-    )
+    ) as HTMLDivElement
+
     if (docEl === null) {
       return
     }
 
-    // Not sure why the content height != body height exactly. But, 50px seems
-    // to prevent scrollbar/content cut off.
-    const divHeight = docEl.clientHeight + 50
+    // Not sure why the content height != body height exactly. But we need to
+    // set the height explicitly to prevent scrollbar/content cut off.
+    const divHeight = docEl.clientHeight
     this.frameContainingDivRef.style.height = `${divHeight}px`
+    docEl.style.height = `${divHeight}px`
     this.props.onMarkdownParsed?.()
   }
 

app/static/common/markdown.css

@@ -9,6 +9,14 @@ desktop font-size variables. (This is not meant to be an exhaustive list of
 changes from the original, just a note that this will not match 1-1)
  */
 
+#content {
+	/*
+	We need to set overflow-y to hidden to make sure this element calculates the
+	right height to fit its content.
+	 */
+	overflow-y: hidden;
+}
+
 .markdown-body {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 	font-size: var(--font-size);

app/styles/ui/_sandboxed-markdown.scss

@@ -1,6 +1,5 @@
 .sandboxed-markdown-iframe-container {
   position: relative;
-  min-height: 50px;
 
   .sandboxed-markdown-component {
     // With combination of setting height of containing div.