Add CSS to allow scrolling of ipywidget (#1760)

This addresses one of the issues in #1740: missing horizontal scrollbar.

- Add CSS rule to allow scrolling
- Add ipywidgets example to the examples/pydata page

pyproject.toml

@@ -76,6 +76,7 @@ doc = [
   "nbsphinx",
   "ipyleaflet",
   "colorama",
+  "ipywidgets"
 ]
 test = ["pytest", "pytest-cov", "pytest-regressions"]
 dev = ["pyyaml", "pre-commit", "nox", "pydata-sphinx-theme[doc,test]"]

src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss

@@ -6,3 +6,9 @@
 .xr-wrap[hidden] {
   display: block !important;
 }
+
+// ipywidgets
+.jp-OutputArea-output.lm-Widget {
+  // override overflow:hidden rule from Lumino (.lm-Widget) to allow scrolling
+  overflow: auto;
+}