From 553e4d8c04344d677a5d04af4936d8bcc569ef8b Mon Sep 17 00:00:00 2001
From: Raymond Zhou <56318341+rayzhou-bit@users.noreply.github.com>
Date: Mon, 11 Apr 2022 09:26:39 -0700
Subject: [PATCH] fix: editor has double scrollbars (#59)

---
 src/editors/Editor.jsx                        |  5 +-
 src/editors/Editor.test.jsx                   |  3 +-
 .../__snapshots__/Editor.test.jsx.snap        | 76 ++++++++++---------
 3 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/src/editors/Editor.jsx b/src/editors/Editor.jsx
index d744fcff3..ad169c555 100644
--- a/src/editors/Editor.jsx
+++ b/src/editors/Editor.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { Stack } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { blockTypes } from './data/constants/app';
@@ -53,13 +54,13 @@ export const Editor = ({
         aria-label={blockType}
       >
         {refReady && (
-          <>
+          <Stack>
             <EditorHeader editorRef={editorRef} />
             {(EditorComponent !== undefined)
               ? <EditorComponent {...{ setEditorRef, editorRef }} />
               : <FormattedMessage {...messages.couldNotFindEditor} />}
             <EditorFooter editorRef={editorRef} />
-          </>
+          </Stack>
         )}
 
       </div>
diff --git a/src/editors/Editor.test.jsx b/src/editors/Editor.test.jsx
index 1362a3554..8312674e5 100644
--- a/src/editors/Editor.test.jsx
+++ b/src/editors/Editor.test.jsx
@@ -40,7 +40,8 @@ describe('Editor', () => {
       if (blockType === 'html') { // snap just one editor to make viewing easier
         expect(wrapper).toMatchSnapshot();
       }
-      expect(wrapper.children().children().at(1).is(supportedEditors[blockType])).toBe(true);
+      expect(wrapper.children().children().children().at(1)
+        .is(supportedEditors[blockType])).toBe(true);
     });
     test('presents error message if no relevant editor found and ref ready', () => {
       hooks.prepareEditorRef.mockImplementationOnce(
diff --git a/src/editors/__snapshots__/Editor.test.jsx.snap b/src/editors/__snapshots__/Editor.test.jsx.snap
index f93a95e94..97e5c561f 100644
--- a/src/editors/__snapshots__/Editor.test.jsx.snap
+++ b/src/editors/__snapshots__/Editor.test.jsx.snap
@@ -9,25 +9,27 @@ exports[`Editor snapshots presents error message if no relevant editor found and
     className="pgn__modal-fullscreen"
     role="dialog"
   >
-    <EditorHeader
-      editorRef={
-        Object {
-          "current": "ref",
+    <Stack>
+      <EditorHeader
+        editorRef={
+          Object {
+            "current": "ref",
+          }
         }
-      }
-    />
-    <FormattedMessage
-      defaultMessage="Error: Could Not find Editor"
-      description="Error Message Dispayed When An unsopported Editor is desired in V2"
-      id="authoring.editorpage.selecteditor.error"
-    />
-    <EditorFooter
-      editorRef={
-        Object {
-          "current": "ref",
+      />
+      <FormattedMessage
+        defaultMessage="Error: Could Not find Editor"
+        description="Error Message Dispayed When An unsopported Editor is desired in V2"
+        id="authoring.editorpage.selecteditor.error"
+      />
+      <EditorFooter
+        editorRef={
+          Object {
+            "current": "ref",
+          }
         }
-      }
-    />
+      />
+    </Stack>
   </div>
 </div>
 `;
@@ -41,28 +43,30 @@ exports[`Editor snapshots renders "html" editor when ref is ready 1`] = `
     className="pgn__modal-fullscreen"
     role="dialog"
   >
-    <EditorHeader
-      editorRef={
-        Object {
-          "current": "ref",
+    <Stack>
+      <EditorHeader
+        editorRef={
+          Object {
+            "current": "ref",
+          }
         }
-      }
-    />
-    <TextEditor
-      editorRef={
-        Object {
-          "current": "ref",
+      />
+      <TextEditor
+        editorRef={
+          Object {
+            "current": "ref",
+          }
         }
-      }
-      setEditorRef={[MockFunction setEditorRef]}
-    />
-    <EditorFooter
-      editorRef={
-        Object {
-          "current": "ref",
+        setEditorRef={[MockFunction setEditorRef]}
+      />
+      <EditorFooter
+        editorRef={
+          Object {
+            "current": "ref",
+          }
         }
-      }
-    />
+      />
+    </Stack>
   </div>
 </div>
 `;