Fix scrolling of longer-than-viewport bootstrap modal in a <dialog>

[jrochkind]

Blacklight uses Bootstrap modal css (I'm not sure about the JS), but uses an HTML5 <dialog> element for the modal, which bootstrap isnt' really expecting.

Specifically, it looks like the <dialog> with the class modal serves as a sort of full-screen 'wrapper'.

Before this PR, scrolling a higher-than-viewport modal would have this odd behavior:

Screen.Recording.2024-11-21.at.2.56.58.PM.mov

Note how the modal disappears under some kind of "invisible" blockers at top and bottom. This is an unnatural and undesirable effect.

Also notice how the scrollbar is floating som distance from the right edge?

This is caused because at least in Chrome, there's a default user-agent stylesheet on dialog that sets:

    max-width: calc(100% - 2em - 6px);
    max-height: calc(100% - 2em - 6px);

Presumably becuase it expects the dialog will be an actual dialog not a wrapper/overlay?

Unsetting these makes the scroll seem closer to normal again.

Screen.Recording.2024-11-20.at.4.53.27.PM.mov

There are a couple more oddities, one of which you can see at the end of there.

1. In Blacklight's implementation, once the modal is fully scrolled, if you keep scrolling, you can scroll the hidden overlaid body underneath it.... that's not how the Bootstrap modal works.
2. In Bootstrap modal, ciicking somewhere outside the modal will close the modal, whereas this is not a feature of html5 native <dialog>. (I wonder if this is an accessibilty issue?)

I wonder if we want to revisit the choice to try to marry a bootstrap dialog to an html5 dialog? But in the meantime, I think this helps?

[jcoyne]

Would it look better if we perhaps set a max-height on .modal-body?

[jrochkind]

Would it look better if we perhaps set a max-height on .modal-body?

I guess then it would have to be internally scrollable if it's contents were larger than that max-height?

I don't think you'd want it to be internally scrollable AND have the whole modal within the viewport also be scrollable, so I guess that'd be max-height in terms of vh or something to make sure it's no more than the screen? (Would that work on very small mobile screens too? Maybe?)

That is an option, but it's not what Blacklight has ever done or the default for bootstrap modal. I'm inclined to keep it operating as it always has (from back when it was a Bootstrap modal), but properly, which is I think what this PR does.

If someone wants to change behavior, that could be a future PR, with more extensive testing on various screen sizes etc? The implementation might be easy or tricky, not sure.