prosemirror toggle button covers toolbar icons due to css padding

[bradgillap]

Description

[Description of the bug or feature]

The prosemirror plugin adds a button to the toolbar at the top right of the of the editor. This button covers other toolbar buttons because of the absolute positioning in the css under the .btn style.

Specifically the btn padding attribute.

padding: 6px 12px;

Removing the absolute (relative? not sure the right phrasing for this) positioning fixes the issue.

I'm not familliar enough with the template or less to write the sort of plugin overrides that I'm seeing in the plugins folder of the template. This is what I need help with. I'd like to just remove the relative absolute px margins via override with something like !important

Please advise.

Steps to reproduce

Bootstrap 3 plugin on hogfather with the prosemirror plugin. You must have enough toolbar icons from other plugins to see the interaction.

Expected behavior: [What you expected to happen]

Toggle from prosemirror should not cover existing toolbar buttons.

Actual behavior: [What actually happened]

Toggle from prosemirror covers toolbar buttons.

Versions

• [Bootstrap3 Template] Latest stable
• [DokuWiki] hogfather
• [Plugins] Prosemirror and bootstrap3
• [PHP] 7.4
• [Browser] Chrome

[bradgillap]

On closer inspection

adding prosemirror.less to the plugin folder with the contents of

.btn {padding: 6px 12px !important;}

Doesn't work great because .btn comes from bootstrap min.

hm, I think I found a class I can use though.

[bradgillap]

This is not a fix of course but I have solved it for now by adding the following to userstyle.css

.dokuwiki .plugin_prosemirror_useWYSIWYG {
    position: relative;
    top: 0;
    right: 0;
    padding: 5px;
    color: black;
    background: orange none;
}