From cc61e2944c6f7a31ac8ea18bba89f9ce628851ec Mon Sep 17 00:00:00 2001
From: Raymond Zhou <56318341+rayzhou-bit@users.noreply.github.com>
Date: Wed, 7 Dec 2022 12:24:48 -0800
Subject: [PATCH] feat: header overlap content when scrolling down (#161)

* feat: header overlap content when scrolling down
---
 .../EditorContainer/__snapshots__/index.test.jsx.snap     | 8 ++++++--
 .../EditorFooter/__snapshots__/index.test.jsx.snap        | 6 +++---
 .../EditorContainer/components/EditorFooter/index.jsx     | 2 +-
 src/editors/containers/EditorContainer/index.jsx          | 2 +-
 src/editors/containers/TextEditor/pluginConfig.js         | 1 +
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
index a913df483..abc5ee84b 100644
--- a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
+++ b/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={
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 5bbecff01..16b4e23a8 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
@@ -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 />
diff --git a/src/editors/containers/EditorContainer/components/EditorFooter/index.jsx b/src/editors/containers/EditorContainer/components/EditorFooter/index.jsx
index cd2c7a8b4..4b2c78aab 100644
--- a/src/editors/containers/EditorContainer/components/EditorFooter/index.jsx
+++ b/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
diff --git a/src/editors/containers/EditorContainer/index.jsx b/src/editors/containers/EditorContainer/index.jsx
index 2b6a65b69..b8e5fc9f4 100644
--- a/src/editors/containers/EditorContainer/index.jsx
+++ b/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' }}
diff --git a/src/editors/containers/TextEditor/pluginConfig.js b/src/editors/containers/TextEditor/pluginConfig.js
index d1b46b0fb..db969be64 100644
--- a/src/editors/containers/TextEditor/pluginConfig.js
+++ b/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,
       },