From fbd3d8506f69a395128353b3fa48aba1805b7de7 Mon Sep 17 00:00:00 2001
From: Jesper Hodge <19345795+jesperhodge@users.noreply.github.com>
Date: Thu, 14 Dec 2023 11:53:26 -0500
Subject: [PATCH] fix: editor container can scroll again (#435)

This is a fix to a problem where some css prevented the editors from scrolling.
---
 src/editors/Editor.jsx                         |  8 --------
 src/editors/__snapshots__/Editor.test.jsx.snap | 18 ------------------
 .../__snapshots__/index.test.jsx.snap          |  4 ++--
 .../containers/EditorContainer/index.jsx       |  3 ++-
 .../containers/EditorContainer/index.scss      |  6 ++++++
 5 files changed, 10 insertions(+), 29 deletions(-)
 create mode 100644 src/editors/containers/EditorContainer/index.scss

diff --git a/src/editors/Editor.jsx b/src/editors/Editor.jsx
index 9236e0474..18ead54a0 100644
--- a/src/editors/Editor.jsx
+++ b/src/editors/Editor.jsx
@@ -33,14 +33,6 @@ export const Editor = ({
   return (
     <div
       className="d-flex flex-column"
-      style={{
-        /* Positioned as a proper Paragon FullscreenModal should have been. */
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '100%',
-      }}
     >
       <div
         className="pgn__modal-fullscreen h-100"
diff --git a/src/editors/__snapshots__/Editor.test.jsx.snap b/src/editors/__snapshots__/Editor.test.jsx.snap
index 8a314a651..5c9cb23a3 100644
--- a/src/editors/__snapshots__/Editor.test.jsx.snap
+++ b/src/editors/__snapshots__/Editor.test.jsx.snap
@@ -3,15 +3,6 @@
 exports[`Editor render presents error message if no relevant editor found and ref ready 1`] = `
 <div
   className="d-flex flex-column"
-  style={
-    Object {
-      "height": "100%",
-      "left": 0,
-      "position": "fixed",
-      "right": 0,
-      "top": 0,
-    }
-  }
 >
   <div
     aria-label="fAkEBlock"
@@ -30,15 +21,6 @@ exports[`Editor render presents error message if no relevant editor found and re
 exports[`Editor render snapshot: renders correct editor given blockType (html -> TextEditor) 1`] = `
 <div
   className="d-flex flex-column"
-  style={
-    Object {
-      "height": "100%",
-      "left": 0,
-      "position": "fixed",
-      "right": 0,
-      "top": 0,
-    }
-  }
 >
   <div
     aria-label="html"
diff --git a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
index af7dec0b7..191a9cc5f 100644
--- a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EditorContainer component render snapshot: initialized. enable save and pass to header 1`] = `
 <div
-  className="d-flex flex-column position-relative zindex-0"
+  className="editor-container d-flex flex-column position-relative zindex-0"
   style={
     Object {
       "minHeight": "100%",
@@ -83,7 +83,7 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
 
 exports[`EditorContainer component render snapshot: not initialized. disable save and pass to header 1`] = `
 <div
-  className="d-flex flex-column position-relative zindex-0"
+  className="editor-container d-flex flex-column position-relative zindex-0"
   style={
     Object {
       "minHeight": "100%",
diff --git a/src/editors/containers/EditorContainer/index.jsx b/src/editors/containers/EditorContainer/index.jsx
index f4ac1a861..99f48ebbc 100644
--- a/src/editors/containers/EditorContainer/index.jsx
+++ b/src/editors/containers/EditorContainer/index.jsx
@@ -13,6 +13,7 @@ import EditorFooter from './components/EditorFooter';
 import TitleHeader from './components/TitleHeader';
 import * as hooks from './hooks';
 import messages from './messages';
+import './index.scss';
 
 export const EditorContainer = ({
   children,
@@ -29,7 +30,7 @@ export const EditorContainer = ({
   const handleCancel = hooks.handleCancel({ onClose, returnFunction });
   return (
     <div
-      className="d-flex flex-column position-relative zindex-0"
+      className="editor-container d-flex flex-column position-relative zindex-0"
       style={{ minHeight: '100%' }}
     >
       <BaseModal
diff --git a/src/editors/containers/EditorContainer/index.scss b/src/editors/containers/EditorContainer/index.scss
new file mode 100644
index 000000000..27f72bb2f
--- /dev/null
+++ b/src/editors/containers/EditorContainer/index.scss
@@ -0,0 +1,6 @@
+// fix double scrollbars
+.editor-container {
+  .pgn__modal-body {
+    overflow: visible;
+  }
+}