Fix unexpected closing of longer modal when clicking on scrollbar

[WillCWX]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Fixes #2013
Fixes this of #1916 :

When the modal is triggered, the scroll bar appears to come about from the center of the screen and shifts immediately to the right, a little weird to see that.

Overview of changes:

• Moves scroll bar to div class="modal-body".
• Other CSS adjusted to keep the gap between the dialog window and the browse window
• Updates modal tests accordingly.

Anything you'd like to highlight/discuss:

The max-height of the div class="modal-content" is set to 90vh to enable scrolling as max-height is infinite otherwise.
90vh looks best to me but I don't have very good eyes for design so do play around with the number to see what maybe best.

I have not tested scrolling in the x-axis as I have yet to find a modal that is longer than the webpage but adding max-width=90vw may fix this easily as well.

Testing instructions:

Add this topic1.md file to a markbind website.
The modal should have a scrollbar that is clickable and looks like this:

the white bar is from snip and not from the website

Proposed commit message: (wrap lines at 72 characters)
Fix unexpected closing of longer modal when clicking on scrollbar

Fix modal scroll

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[yucheng11122017]

Thanks for the work @WillCWX! Some minor comments :)

[yucheng11122017]

LGTM! Thanks for the work @WillCWX

[tlylt]

Hi @WillCWX, wondering if you have explored ways to make it work without moving the scrollbar into the modal? Would be great if we could provide both options, perhaps something like what Chakra UI offers:

https://chakra-ui.com/docs/components/modal/usage#modal-overflow-behavior

[tlylt]

Personally I think its better to have the max height as 100vh to be consistent with previous display

@yucheng11122017 what do you mean by previous display? Existing modal without this PR change has a "padding" at the bottom, which is achievable if we do with max height = 100% + some other CSS. I think this might be more comfortable visually hence let's go with this instead 😺.

I adjusted the style slightly to

• achieve the margin around the dialog window
• move the scrollbar into the modal body instead of having it scroll from the header
• and also updated the test case.

This is not the best solution out there but I think it does address the issue for now. In fact, scrolling within the body seems to be the solution for long modals for v2 of vue-final modal (slight difference in that they have more margin) :

Will post a separate issue to track modal improvements.

Some investigation note:

• the current issue Longer Modal closes unexpectedly when interacting with the scrollbar #2013 has been reported here in vue-final-modal
• an example is given by the author here and here, however these examples are using later version of vue-final-modal. I tried to implement something similar but could not get it to work

[tlylt]

@all-contributors please add @WillCWX for code

[allcontributors]

@tlylt

I've put up a pull request to add @WillCWX! 🎉