feat: change editor footer from sticky to fixed (#202)

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"

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"

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]}

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]}

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} />

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 })}

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 />

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"

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"
   >

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>