css overrides from jdaviz/voila

[havok2063]

For web embeds, since jdaviz and voila are inserted last, its CSS always overrides existing CSS in the main web, where it conflicts. Attempts to inject fixes on our end have sometimes resulted in messed up jdaviz components and/or layouts. It's unclear if the problem is underlying CSS or Vuetify on our end or within jdaviz itself. Jdaviz does appear to be hardcoding some things, e.g. the height of the application. For example, see https://github.com/spacetelescope/jdaviz/blob/main/jdaviz/app.vue#L14-L25.

You can go here, https://z.mastdev.stsci.edu/object.html?survey=candels&objid=1000006666&spectra, and click the Spectra tab. You can also go here https://mastdev.stsci.edu/viz/jwst/spectra?uri=mast:JWST/product/jw00736-o039_t001_miri_ch3-medium_s3d.fits. I've attached screenshots of the issues.

There are additional CSS issues coming from Voila itself, captured in https://github.com/mariobuikhuizen/voila-embed/issues/17. This issue revolves around css applied to the global html body element.

Screenshots: The application being injected into a new row when it used to be contained in an adjacent column next to the sidebar.

An unknown 48-pixel top padding inserted.

The application height is fixed and cannot be modified.