'Feature details' popup not constrained by window height and does offer vertical scroll

[bbimber]

Hello,

We're using JBrowse version 2.15.0, as a linear genome view wrapped and embedded in another website. I cannot say when this behavior started, but we recently noticed that the 'feature details' popups have begun to get cut off. They extend off the page and dont offer a vertical scroll bar.

We originally thought this was due to our custom extension of the variant details plugin; however, this doesnt seem to be true. The popups for basic features (like a GFF) also extend off the screen.

We fixed our custom plugin by explicitly constraining height and adding vertical scroll:

https://github.com/BimberLab/DiscvrLabKeyModules/blob/e5a0c7091a497abafc07323ef54ee7e9913fc4ef/jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ExtendedVariantWidget/ExtendedVariantWidget.tsx#L410

Has this sort of problem emerged for anyone else? Is there something within JBrowse's plugin framework where injecting something explicit about scroll behavior would make sense?

Thanks for any help or debugging suggestions.

[cmdcolin]

Just to link to older thread: this was previously discussed here #4604 (comment)

It would be useful to have a reproduction to help diagnose, it's just hard to recommend anything without it. Our "storybook" docs for the embedded components do not have the issue your describe as far as I can tell. Clicking on features gives full height dialog boxes with no cut off and a usable scroll bar

Other possible thoughts:

• It could be a CSS collision with the page that you are embedding on. CSS collision issues are tricky. One possible way to work around this is to use shadowDOM/web-componentized version. This fully isolates the jbrowse module from any other page css. A demo of shadowDOM jbrowse is here https://jbrowse.org/storybook/lgv/main/?path=/docs/using-shadowdom-custom-element--docs

• This wouldn't truly fix the issue but I think it would be good to add the ability to use the sidebar widget to @jbrowse/react-linear-genome-view. The @jbrowse/react-app has a sidebar, and feels like a similar thing could be added (optionally) to the @jbrowse/react-linear-genome-view. This way, feature details, track list, etc would use the side bar widget

[bbimber]

@cmdcolin: apologies for forgetting the original issue. sorry for the duplicate. I thought we had this resolved until I noticed the problem was also on other track types.

As far as a repro: I take your point. It's difficult to sandbox this, and I agree some kind of interaction between the JBrowse CSS and outer CSS could be the culprit. The browser is live here, although you need to register to view it: https://mgap.ohsu.edu/jbrowse/mGAP/browser.view?database=9D7297DA-5030-103D-B6A7-A4C7310EFC10.

[cmdcolin]

since this doesn't appear to strictly be a issue, converting to discussion