ipyaladin viewer style sheet issue in marimo notebooks

[pgriffin17]

Describe the bug

I am attempting to use ipyaladin (an astronomical sky survey viewer, and more) in marimo. They use AnyWidget so I thought it would be fun to try in marimo. However, I ran into an issue that the icons for the widget appeared huge and did not appear on the image visualization. The area that registers clicks was also directly below the image. See screenshot for an idea of what's going on - the screenshot is at 30% zoom in my browser.

This issue is also posted to the ipyaladin repo. Through the marimo discord, it was suggested this is a stylesheet issue, potentially with ShadowDOM.

Environment

{ "marimo": "0.8.2", "OS": "Windows", "OS Version": "10", "Processor": "Intel64 Family 6 Model 151 Stepping 2, GenuineIntel", "Python Version": "3.10.6", "Binaries": { "Browser": "128.0.6613.84", "Node": "v18.18.2" }, "Requirements": { "click": "8.1.7", "importlib-resources": "5.12.0", "jedi": "0.18.1", "markdown": "3.6", "pymdown-extensions": "10.8.1", "pygments": "2.18.0", "tomlkit": "0.13.0", "uvicorn": "0.30.1", "starlette": "0.37.2", "websockets": "12.0", "typing-extensions": "4.12.2", "ruff": "0.5.2" } }

Code to reproduce

import marimo

__generated_with = "0.8.2" app = marimo.App(width="full")

@app.cell def __(): import marimo as mo from ipyaladin import Aladin return Aladin, mo

@app.cell def __(Aladin, mo): aladin = Aladin(target="ngc4151", fov=2) aladin = mo.ui.anywidget(aladin) aladin return aladin,

if name == "main": app.run()

[ManonMarchand]

Hi Marimo team, ipyaladin team here :slightly_smiling_face:

We'd love to make things better on our side, but it is a bit out of our expertise. Do you have good readings on how to proceed? Or maybe other anywidgets that do stylesheets correctly so that we could get inspiration?

[ManonMarchand]

We have a dirty solution where we import Aladin's style sheet in the widget for now.

:crossed_fingers: I think we can find a cleaner way and support Marimo in the next version