feat: header overlap content when scrolling down (#161)

* feat: header overlap content when scrolling down

src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap

@@ -2,7 +2,9 @@
 
 exports[`EditorContainer component render snapshot: initialized. enable save and pass to header 1`] = `
 <div>
-  <ModalDialog.Header>
+  <ModalDialog.Header
+    className="shadow-sm zindex-10"
+  >
     <ModalDialog.Title>
       <div
         style={
@@ -60,7 +62,9 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
 
 exports[`EditorContainer component render snapshot: not initialized. disable save and pass to header 1`] = `
 <div>
-  <ModalDialog.Header>
+  <ModalDialog.Header
+    className="shadow-sm zindex-10"
+  >
     <ModalDialog.Title>
       <div
         style={

src/editors/containers/EditorContainer/components/EditorFooter/__snapshots__/index.test.jsx.snap

@@ -11,7 +11,7 @@ exports[`EditorFooter render snapshot: default args (disableSave: false, saveFai
   }
 >
   <ModalDialog.Footer
-    className="border-top-0"
+    className="shadow-sm"
   >
     <ActionRow>
       <ActionRow.Spacer />
@@ -53,7 +53,7 @@ exports[`EditorFooter render snapshot: save disabled. Show button spinner 1`] =
   }
 >
   <ModalDialog.Footer
-    className="border-top-0"
+    className="shadow-sm"
   >
     <ActionRow>
       <ActionRow.Spacer />
@@ -104,7 +104,7 @@ exports[`EditorFooter render snapshot: save failed.  Show error message 1`] = `
     />
   </Toast>
   <ModalDialog.Footer
-    className="border-top-0"
+    className="shadow-sm"
   >
     <ActionRow>
       <ActionRow.Spacer />

src/editors/containers/EditorContainer/components/EditorFooter/index.jsx

@@ -28,7 +28,7 @@ export const EditorFooter = ({
       </Toast>
     )}
 
-    <ModalDialog.Footer className="border-top-0">
+    <ModalDialog.Footer className="shadow-sm">
       <ActionRow>
         <ActionRow.Spacer />
         <Button

src/editors/containers/EditorContainer/index.jsx

@@ -20,7 +20,7 @@ export const EditorContainer = ({
   const handleCancelClicked = hooks.handleCancelClicked({ onClose });
   return (
     <div>
-      <ModalDialog.Header>
+      <ModalDialog.Header className="shadow-sm zindex-10">
         <ModalDialog.Title>
           <div
             style={{ height: '44px', margin: 'auto' }}

src/editors/containers/TextEditor/pluginConfig.js

@@ -56,6 +56,7 @@ const pluginConfig = (isLibrary) => {
         menubar: false,
         min_height: 500,
         toolbar_sticky: true,
+        toolbar_sticky_offset: 76,
         relative_urls: true,
         convert_urls: false,
       },