Inproper styling of dataframes for myst-nb + pydata theme when contained in ipywidget (2)

[ClementPinard]

Hi, this is a small continuation from #1063

Last time, there was a problem with the table collapsing, this is solved now (thank you !)

Now I am in search for a solution to style the dataframe in a widget the same way as directly outputted in the cell

As you can see, the dataframe in the tab widget does not have the same color (and the widget is not dark themed as well), and more problematic, the horizontal scroll bar is gone.

Note that contrary to the last problem, this one is present in both nbconvert and nb-sphinx

Also, note that the light mode has the right dataframe colors, but still does not have the scroll bar. As such, I am not sure the scroll bar disappearing is related to pydata theme

As for the last issue, you can recreate the problem in this (updated) repo : https://github.com/ClementPinard/pydata-nbsphinx-pandas-bug-example

Versions:

Sphinx = 5.3.0
jupyter = 1.0.0
pydata-sphinx-theme = 0.15.2
myst-nb = 1.0.0

In short, it would be nice to

• style the widgets in dark theme
• style the dataframe in widgets in dark theme
• add a "overflow: auto" attribute somewhere instead of hidden

[trallard]

Thanks for sharing this feedback @ClementPinard.
We will look into this as we are also planning to make some overall improvements to tables styling and scrolling soon.

[trallard]

Pinging @gabalafou who is looking into tables right now

[gabalafou]

Ohhhh, this a deep rabbit hole.

From what I can tell, there are two separate issues here:

1. Dark theme styles for ipywidget
2. Horizontal scroll bar

I opened a PR (#1760) for the second issue based on what JupyterLab does. For the history of this change, see:

• Let an output overflow with scrollbars in both directions. jupyterlab/jupyterlab#6104
• Add horizontal scrolling and fix image constraining jupyterlab/jupyterlab#2499

For the first issue, it seems to me like we need to make a decision about how we want to make ipywidgets look good on sites using PyData Sphinx theme with nbsphinx or myst-nb. We could write CSS in this repo or we could help write CSS in the ipywidgets repo. Here are a few relevant GitHub issues:

• Publish dark mode variables.css jupyter-widgets/ipywidgets#3675
• Support dark mode spatialaudio/nbsphinx#635 (comment)

[gabalafou]

JupyterLab PR #2737 may shine some light onto how JupyterLab styles ipywidgets for both light and dark mode

[trallard]

Adjacent #745

[Carreau]

This might have been fixed by #1787