fix: editor has double scrollbars (#59)

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>

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(

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>
 `;