Editor Does not respect Custom Mount Element

[camdenvaughan]

Describe the bug
I followed the docs to mount decap in a div using id="nc-root". I did this so that I could add a header and a footer, but I realized that once I entered the editor page some weird behavior would happen. This seemed to be because the editor toolbar would remain fixed outside of this root div, while the rest of the elements stayed inside. This covered my custom header as well as messed up the normal Decap UI by showing the header from the decap home page. I believe I have found a fix (Switching ToolbarContainer position from fixed to absolute, I detailed it in the additional context and provided a screenshot)

To Reproduce
Add a div with id="nc-root"
create a div above that (i gave it a class of "header")
style the header to have a width of 100% and a height (I used 50px)
Optionally you can place all of it inside of another div that does not take up the entire page to better demonstate that the header goes outside of the bounds of this root div. (In my screenshots I did this and gave it a green background)

Expected behavior
I expected for the entire cms to stay inside of this root element.

Screenshots
Without Fix

With Fix (Changing ToolbarContainer Position from fixed to absolute)

Applicable Versions:

• Decap CMS version: 3.1.10
• Git provider: Github
• OS: Windows 11
• Browser version Chrome 124.0.6367.119

• Node.JS version:

CMS configuration
backend:
name: git-gateway
repo: camdenvaughan/decap-test
branch: main
local_backend: true
media_folder: src/assets/img
public_folder: src/assets/img

collections:

• name: "blog"
  label: "Blog"
  folder: "src/content/blog"
  create: true
  fields:
  • { label: "Title", name: "title", widget: "string" }
  • { label: "Publish Date", name: "date", widget: "datetime" }
  • { label: "ogImage", name: "ogImage", widget: "image" }
  • { label: "Description", name: "description", widget: "string" }
  • { label: "Body", name: "body", widget: "markdown" }

Additional context
I believe I have found a fix for this already. In the inspector window I could change the position of this toolbar from fixed to absolute and it solved everything. I forked the repo, found where this is in decap-cms\packages\decap-cms-core\src\components\Editor\EditorToolbar.js and changed the style of "ToolbarContainer" from fixed to absolute. I am new to all this, I have never done a pull request before, and I don't know if there needs to be any tests done for this, but I would be happy to help with fixing this.