From 5e037a7209aadcdcb26a318eef987d0b15c3751d Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Wed, 18 Jan 2023 14:39:46 -0500
Subject: [PATCH] feat: change editor footer from sticky to fixed (#202)

---
 src/editors/Editor.jsx                        |  2 +-
 .../__snapshots__/Editor.test.jsx.snap        |  4 ++--
 .../__snapshots__/index.test.jsx.snap         | 13 +++++++---
 .../__snapshots__/index.test.jsx.snap         | 24 +++----------------
 .../components/EditorFooter/index.jsx         |  2 +-
 .../containers/EditorContainer/index.jsx      |  4 +++-
 .../SelectTypeWrapper/SelectTypeFooter.jsx    |  2 +-
 .../SelectTypeFooter.test.jsx.snap            |  7 +-----
 .../__snapshots__/index.test.jsx.snap         |  9 +------
 .../sharedComponents/RawEditor/index.jsx      |  2 +-
 10 files changed, 24 insertions(+), 45 deletions(-)

diff --git a/src/editors/Editor.jsx b/src/editors/Editor.jsx
index d760c72de..6668e5eb3 100644
--- a/src/editors/Editor.jsx
+++ b/src/editors/Editor.jsx
@@ -30,7 +30,7 @@ export const Editor = ({
 
   const EditorComponent = supportedEditors[blockType];
   return (
-    <div className="d-flex flex-column vh-100">
+    <div className="d-flex flex-column">
       <div
         className="pgn__modal-fullscreen"
         role="dialog"
diff --git a/src/editors/__snapshots__/Editor.test.jsx.snap b/src/editors/__snapshots__/Editor.test.jsx.snap
index d7f9b8b83..de3f18a95 100644
--- a/src/editors/__snapshots__/Editor.test.jsx.snap
+++ b/src/editors/__snapshots__/Editor.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Editor render presents error message if no relevant editor found and ref ready 1`] = `
 <div
-  className="d-flex flex-column vh-100"
+  className="d-flex flex-column"
 >
   <div
     aria-label="fAkEBlock"
@@ -20,7 +20,7 @@ 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 vh-100"
+  className="d-flex flex-column"
 >
   <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 368526098..8f1ce57db 100644
--- a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
@@ -62,9 +62,13 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
       </div>
     </ModalDialog.Title>
   </ModalDialog.Header>
-  <h1>
-    My test content
-  </h1>
+  <ModalDialog.Body
+    className="pb-6"
+  >
+    <h1>
+      My test content
+    </h1>
+  </ModalDialog.Body>
   <injectIntl(ShimmedIntlComponent)
     disableSave={false}
     onCancel={[MockFunction openCancelConfirmModal]}
@@ -143,6 +147,9 @@ exports[`EditorContainer component render snapshot: not initialized. disable sav
       </div>
     </ModalDialog.Title>
   </ModalDialog.Header>
+  <ModalDialog.Body
+    className="pb-6"
+  />
   <injectIntl(ShimmedIntlComponent)
     disableSave={true}
     onCancel={[MockFunction openCancelConfirmModal]}
diff --git a/src/editors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap
index 16b4e23a8..9fa3931b4 100644
--- a/src/editors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap
@@ -2,13 +2,7 @@
 
 exports[`EditorFooter render snapshot: default args (disableSave: false, saveFailed: false) 1`] = `
 <div
-  className="editor-footer"
-  style={
-    Object {
-      "bottom": 0,
-      "position": "sticky",
-    }
-  }
+  className="editor-footer fixed-bottom"
 >
   <ModalDialog.Footer
     className="shadow-sm"
@@ -44,13 +38,7 @@ exports[`EditorFooter render snapshot: default args (disableSave: false, saveFai
 
 exports[`EditorFooter render snapshot: save disabled. Show button spinner 1`] = `
 <div
-  className="editor-footer"
-  style={
-    Object {
-      "bottom": 0,
-      "position": "sticky",
-    }
-  }
+  className="editor-footer fixed-bottom"
 >
   <ModalDialog.Footer
     className="shadow-sm"
@@ -85,13 +73,7 @@ exports[`EditorFooter render snapshot: save disabled. Show button spinner 1`] =
 
 exports[`EditorFooter render snapshot: save failed.  Show error message 1`] = `
 <div
-  className="editor-footer"
-  style={
-    Object {
-      "bottom": 0,
-      "position": "sticky",
-    }
-  }
+  className="editor-footer fixed-bottom"
 >
   <Toast
     onClose={[MockFunction hooks.nullMethod]}
diff --git a/src/editors/containers/EditorContainer/components/EditorFooter/index.jsx b/src/editors/containers/EditorContainer/components/EditorFooter/index.jsx
index 4b2c78aab..f7109901c 100644
--- a/src/editors/containers/EditorContainer/components/EditorFooter/index.jsx
+++ b/src/editors/containers/EditorContainer/components/EditorFooter/index.jsx
@@ -21,7 +21,7 @@ export const EditorFooter = ({
   // injected
   intl,
 }) => (
-  <div className="editor-footer" style={{ position: 'sticky', bottom: 0 }}>
+  <div className="editor-footer fixed-bottom">
     {saveFailed && (
       <Toast show onClose={nullMethod}>
         <FormattedMessage {...messages.contentSaveFailed} />
diff --git a/src/editors/containers/EditorContainer/index.jsx b/src/editors/containers/EditorContainer/index.jsx
index 21d7edd2b..bd3658801 100644
--- a/src/editors/containers/EditorContainer/index.jsx
+++ b/src/editors/containers/EditorContainer/index.jsx
@@ -62,7 +62,9 @@ export const EditorContainer = ({
           </div>
         </ModalDialog.Title>
       </ModalDialog.Header>
-      {isInitialized && children}
+      <ModalDialog.Body className="pb-6">
+        {isInitialized && children}
+      </ModalDialog.Body>
       <EditorFooter
         onCancel={openCancelConfirmModal}
         onSave={hooks.handleSaveClicked({ dispatch, getContent, validateEntry })}
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.jsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.jsx
index 324e03bf3..1d0e8f870 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.jsx
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/SelectTypeFooter.jsx
@@ -22,7 +22,7 @@ export const SelectTypeFooter = ({
   // injected,
   intl,
 }) => (
-  <div className="editor-footer position-sticky" style={{ bottom: 0 }}>
+  <div className="editor-footer fixed-bottom">
     <ModalDialog.Footer className="border-top-0">
       <ActionRow>
         <ActionRow.Spacer />
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/SelectTypeFooter.test.jsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/SelectTypeFooter.test.jsx.snap
index 760a9d35c..5d136ff50 100644
--- a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/SelectTypeFooter.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/SelectTypeFooter.test.jsx.snap
@@ -2,12 +2,7 @@
 
 exports[`SelectTypeFooter snapshot 1`] = `
 <div
-  className="editor-footer position-sticky"
-  style={
-    Object {
-      "bottom": 0,
-    }
-  }
+  className="editor-footer fixed-bottom"
 >
   <ModalDialog.Footer
     className="border-top-0"
diff --git a/src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap
index 310a73298..056066354 100644
--- a/src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/sharedComponents/RawEditor/__snapshots__/index.test.jsx.snap
@@ -1,14 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RawEditor renders as expected with default behavior 1`] = `
-<div
-  style={
-    Object {
-      "height": "600px",
-      "padding": "10px 30px",
-    }
-  }
->
+<div>
   <Alert
     variant="danger"
   >
diff --git a/src/editors/sharedComponents/RawEditor/index.jsx b/src/editors/sharedComponents/RawEditor/index.jsx
index 6c3adccd6..05bbc9401 100644
--- a/src/editors/sharedComponents/RawEditor/index.jsx
+++ b/src/editors/sharedComponents/RawEditor/index.jsx
@@ -18,7 +18,7 @@ export const RawEditor = ({
   const value = getValue(content);
 
   return (
-    <div style={{ padding: '10px 30px', height: '600px' }}>
+    <div>
       <Alert variant="danger">
         You are using the raw {lang} editor.
       </Alert>