Modal not working correctly in UG Page Navigation Menus section

[tlylt]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

Tell us about your environment

Windows 10

MarkBind version

3.1.1

What did you do? Describe the bug

Click on the modal trigger in https://markbind-master.netlify.app/userguide/syntaxcheatsheet page-navigation-menus, two modals opened for that.

Steps to reproduce

• Enter https://markbind-master.netlify.app/userguide/syntaxcheatsheet
• Go to Page Navigation Menus
• Click on the Example usage of the <page-nav /> component

Expected behavior

Expected to behave normally like in https://markbind.org/userGuide/syntaxCheatSheet.html

Actual behavior

Open two models

Anything else?

Other pages seem to work fine. Wonder if it's due to the Bootstrap update, @jovyntls any idea?

[jovyntls]

The top-left positioning seems to be caused by putting a modal in a panel header, which could be messing with the positioning of the modal.

The two modals appearing at once should be caused by having two modals with the same ID in the same page? i.e. the top-left one is from the panel header, the centred one is from the panel contents.

Minimal reproduction:

<panel>
<div slot="header" id="hjkl">

<trigger for="asdf">
trigger 
</trigger>

<modal id="asdf" header="asdf modal">
content
</modal>
</div>
</panel>

<include src="{{baseUrl}}/userGuide/syntax/pageNavigationMenus.md#hjkl" />

EDIT: on further investigation, I would guess that it's caused by the positioning of the card-title class for panel headers using margin: 0 !important. Will experiment with using width: 100% instead. This will fix the positioning of the modals, but not the duplicated modals appearing