From 69a1892cc75798867a5ed81fc8401adc94b87b56 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Mon, 8 Apr 2024 13:46:39 -0400
Subject: [PATCH] Add CSS to allow scrolling of ipywidget

---
 docs/examples/pydata.ipynb                    | 51 +++++++++++++++++--
 pyproject.toml                                |  1 +
 .../assets/styles/extensions/_pydata.scss     |  6 +++
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/docs/examples/pydata.ipynb b/docs/examples/pydata.ipynb
index 7f2d7d189..c63a73321 100644
--- a/docs/examples/pydata.ipynb
+++ b/docs/examples/pydata.ipynb
@@ -8,8 +8,13 @@
     "\n",
     "This theme has built-in support and special styling for several major visualization libraries in the PyData ecosystem.\n",
     "This ensures that the images and output generated by these libraries looks good for both light and dark modes.\n",
-    "Below are examples of each that we use as a benchmark for reference.\n",
-    "\n",
+    "Below are examples of each that we use as a benchmark for reference."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
     "## Pandas"
    ]
   },
@@ -30,6 +35,46 @@
     "df"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## IPyWidget"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import pandas as pd\n",
+    "import numpy as np\n",
+    "import ipywidgets as widgets\n",
+    "from IPython.display import display\n",
+    "\n",
+    "tab = widgets.Tab()\n",
+    "\n",
+    "descr_str = \"Hello\"\n",
+    "\n",
+    "title = widgets.HTML(descr_str)\n",
+    "\n",
+    "# create output widgets\n",
+    "widget_images = widgets.Output()\n",
+    "widget_annotations = widgets.Output()\n",
+    "\n",
+    "# render in output widgets\n",
+    "with widget_images:\n",
+    "    display(pd.DataFrame(np.random.randn(10,10)))\n",
+    "with widget_annotations:\n",
+    "    display(pd.DataFrame(np.random.randn(10,10)))\n",
+    "\n",
+    "tab.children = [widget_images, widget_annotations]\n",
+    "tab.titles = [\"Images\", \"Annotations\"]\n",
+    "\n",
+    "display(widgets.VBox([title, tab]))"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -143,7 +188,7 @@
   },
   "language_info": {
    "name": "python",
-   "version": "3.10.8"
+   "version": "3.11.6"
   }
  },
  "nbformat": 4,
diff --git a/pyproject.toml b/pyproject.toml
index 8d674125d..3ca237a74 100644
--- a/pyproject.toml
+++ b/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]"]
diff --git a/src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss b/src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss
index 94a1994cc..56ee5fbf4 100644
--- a/src/pydata_sphinx_theme/assets/styles/extensions/_pydata.scss
+++ b/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;
+}