Skip to content

Fix overflow for JupyterLite iframes when added by directives used inside PST admonitions #333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
agriyakhetarpal wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix overflow for JupyterLite iframes when added by directives used inside PST admonitions #333

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
87d7a99
Hunt down bug with iframe overflow under admonitions
agriyakhetarpal Feb 24, 2026
dc5c3c6
Fix non-standard CSS property
agriyakhetarpal Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 37 additions & 1 deletion jupyterlite_sphinx/jupyterlite_sphinx.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
:root {
/* This variable mirrors the per-side margin the PyData Sphinx Theme applies to the
children of the admonitions. FIXME later; find a way to keep this stable */
--jls-admonition-indent: 1.4rem;
}

.jupyterlite_sphinx_raw_iframe {
border-width: 1px;
border-style: solid;
Expand Down Expand Up @@ -60,11 +66,41 @@
background:
radial-gradient(farthest-side, #ffa516 94%, #0000) top/8px 8px no-repeat,
conic-gradient(#0000 30%, #ffa516);
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
animation: l13 1s infinite linear;
}
@keyframes l13 {
100% {
transform: rotate(1turn);
}
}

/*
* A hack to fix the JupyterLite iframes overflowing admonitions in the PyData Sphinx Theme,
* (notwithstanding any contemporary themes we don't verify in our CI against).
*
* The pydata-sphinx-theme applies margins to every sibling of the admonition title:
* https://github.com/pydata/pydata-sphinx-theme/blob/213af5a59dd18500fdc3b82fb49afc89a54fff33/src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss#L28-L32
*
* .admonition p.admonition-title ~ *,
* div.admonition p.admonition-title ~ * {
* margin-left: 1.4rem;
* margin-right: 1.4rem;
* }
*
* Because the JupyterLite iframe container already carries a width="100%" (of the
* admonition's content box, that is), the extra 1.4rem on each side pushes the
* rendered width to 100% + 2.8rem and causes a visible overflow to the right. We
* tackle this below. */

/* non-prompted case: the bare <iframe> emitted by _PromptedIframe.html() */
.admonition p.admonition-title ~ iframe.jupyterlite_sphinx_raw_iframe,
div.admonition p.admonition-title ~ iframe.jupyterlite_sphinx_raw_iframe {
width: calc(100% - 2 * var(--jls-admonition-indent));
}

/* prompted case: <div class="jupyterlite_sphinx_iframe_container"> */
.admonition p.admonition-title ~ div.jupyterlite_sphinx_iframe_container,
div.admonition p.admonition-title ~ div.jupyterlite_sphinx_iframe_container {
width: calc(100% - 2 * var(--jls-admonition-indent));
}
Loading