Page extends past the footer with empty space when there are dropdown admonitions

[bbye98]

Hello!

I'm getting a reproducible bug where I am able to scroll past the end of an autosummary-generated API reference page. I believe this is caused by the page trying to account for the vertical space required by the content of the dropdown admonitions in the LAST function/method on the page, even though it is currently (and by default) collapsed. However, it appears that if that dropdown admonition is further up the page (maybe not in the viewing area when scrolled fully down?), the page is fine.

Here's an example of a page that is bugged: https://minim.readthedocs.io/en/feature-musixmatch-lyrics-api/autosummary/minim.api.apple.iTunesSearchAPIClient.html#minim.api.apple.iTunesSearchAPIClient

And here's an example of a page that rendered correctly, even though it has a dropdown admonition halfway down the page: https://minim.readthedocs.io/en/feature-musixmatch-lyrics-api/autosummary/minim.api.deezer.DeezerAPIClient.html

Oddly, I see that the example page with the sphinx-togglebutton in the Shibuya docs (https://shibuya.lepture.com/extensions/sphinx-togglebutton/) doesn't have this issue, but it also doesn't have the dropdown admonition in a function/method.

I do have some minor CSS and theme customizations, but I do not believe any of these settings break the theme (as the theme I was using previously, Furo, did not have these issues):

admonitions.css

:root {
    --entitlement-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxvY2staWNvbiBsdWNpZGUtbG9jayI+PHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjExIiB4PSIzIiB5PSIxMSIgcng9IjIiIHJ5PSIyIi8+PHBhdGggZD0iTTcgMTFWN2E1IDUgMCAwIDEgMTAgMHY0Ii8+PC9zdmc+');
    --response-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJyYWNlcy1pY29uIGx1Y2lkZS1icmFjZXMiPjxwYXRoIGQ9Ik04IDNIN2EyIDIgMCAwIDAtMiAydjVhMiAyIDAgMCAxLTIgMiAyIDIgMCAwIDEgMiAydjVjMCAxLjEuOSAyIDIgMmgxIi8+PHBhdGggZD0iTTE2IDIxaDFhMiAyIDAgMCAwIDItMnYtNWMwLTEuMS45LTIgMi0yYTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDAtMi0yaC0xIi8+PC9zdmc+')
}

.admonition.entitlement {
    --icon-url: var(--entitlement-icon);
    --color-1: var(--teal-surface);
    --color-2: var(--teal-a3);
    --color-3: var(--teal-9);
    --color-4: var(--teal-a11);
}

.admonition.response {
    --icon-url: var(--response-icon);
    --color-1: var(--iris-surface);
    --color-2: var(--iris-a3);
    --color-3: var(--iris-9);
    --color-4: var(--iris-a11);
}

.admonition .sd-tab-set>input:checked+label {
    border-color: var(--color-4);
    color: var(--color-4);
}

.admonition .sd-tab-set>input:not(:checked)+label:hover {
    border-color: var(--color-3);
    color: var(--color-3);
}

.sd-tab-set>label {
    padding-top: 0.25rem !important;
}

.sd-tab-content {
    padding-top: 1.00rem !important;
}

conf.py

extensions = [
    "numpydoc",
    "sphinx_copybutton",
    "sphinx_design",
    "sphinx_togglebutton",
    "sphinx.ext.autodoc",
    "sphinx.ext.autosummary",
    "sphinx.ext.duration",
    "sphinx.ext.githubpages",
    "sphinx.ext.intersphinx",
    "sphinx.ext.napoleon",
    "sphinx.ext.viewcode",
]
exclude_patterns = ["_build"]
templates_path = ["_templates"]
toc_object_entries_show_parents = "hide"

autoclass_content = "both"
autosummary_generate = True
autosummary_ignore_module_all = False
autosummary_imported_members = True
intersphinx_mapping = {
    "python": ("https://docs.python.org/3/", None),
}
numpydoc_show_class_members = False
togglebutton_hint = togglebutton_hint_hide = ""

html_favicon = "../../assets/favicon.ico"
html_logo = "../../assets/icon.svg"
html_show_sourcelink = False
html_static_path = ["_static"]
html_theme = "shibuya"
html_theme_options = {"accent_color": "gray", "toctree_maxdepth": 5}

RST files for autosummary templating

I am using these Sphinx-related extensions/packages:

  numpydoc                       1.10.0    pyhcf101f3_0          conda-forge
  python                         3.13.11   hc97d973_100_cp313    conda-forge
  shibuya                        2026.1.9  pyhd8ed1ab_0          conda-forge
  sphinx                         9.1.0     pyhd8ed1ab_0          conda-forge
  sphinx-copybutton              0.5.2     pyhd8ed1ab_1          conda-forge
  sphinx-design                  0.7.0     pyhd8ed1ab_0          conda-forge
  sphinx-togglebutton            0.3.2     pyhd8ed1ab_0          conda-forge

Am I doing something wrong, and is there a fix for this?

Thank you!

[bbye98]

Looks like this small addition to my CSS file fixes the issue:

.admonition.dropdown {
    contain: layout;
}

[bbye98]

May I suggest a few minor tweaks to Shibuya? I'm happy to open a new issue if that's better for tracking. (I'm not very familiar with Sphinx themes and what powers them, or else I would submit a PR!)

1. Fix the overextended page when dropdown admonitions are present:

   .admonition.dropdown {
       contain: layout;
   }

2. Adjust the padding for sphinx-design tabs and tabbed content (currently, the tabs have too much space above the tab labels and too little space between the tabs and the content below the tabs):

   .sd-tab-set>label {
       padding-top: 0.25rem !important;
   }
   
   .sd-tab-content {
       padding-top: 1.00rem !important;
   }

3. Add the copyright symbol (©) before the copyright string from conf.py that ends up in the footer.

4. Add "the" before "Shibuya theme" in the footer! ("Made with Sphinx and Shibuya theme." --> "Made with Sphinx and the Shibuya theme.")

This one is purely personal preference, but I feel that tabs inside an admonition should respect the admonition's color/styling, not the overall theme color/styling:

.admonition .sd-tab-set>input:checked+label {
    border-color: var(--color-4);
    color: var(--color-4);
}

.admonition .sd-tab-set>input:not(:checked)+label:hover {
    border-color: var(--color-3);
    color: var(--color-3);
}

Appreciate your time! Feel free to close this issue, as I am able to get all of the desired behavior inside by tweaking my custom CSS file.