Linear alignment wrong in rtd-theme

[dafeder]

Describe the bug

context
When I load a document with togglebutton added to an admonition

expectation
I expected it to look correct in the readthedocs theme

bug
But instead the alignment is off and "Click to show" is falling out of the admonition title

I can see this in Chrome and Firefox currently in the spinx-lesson site, which was provided as an example in this repo of a working implementation of this extension using the rtd theme

On our RTD site, we added some custom CSS to fix:

button.toggle-button::before {
  vertical-align: top;
  color: white;
}
.tb-icon {
  height: 1.1em;
  width: 1.1em;
  color: white;
}

Reproduce the bug

Visit https://coderefinery.github.io/sphinx-lesson/sample-episode-rst/

Or implement togglebutton on an admonition on your own RTD-themed build.

List your environment

No response

[ashwinvis]

IMHO it is theme dependent. Take this extension along with furo used here https://sphinx-evita.readthedocs.io/en/latest/ref-for-module-authors.html#making-a-drop-down-admonition . I don't need to set directives for .tb-icon since the right chevron svg image is centered correctly. However the button.toggle-button needs tweak.

No tweaks:

With vertical-align: top

With vertical-align: text-top

With:

button.toggle-button::before {
  vertical-align: middle;
  padding-bottom: 1rem;
}

[ashwinvis]

Here the page linked by OP with the vertical-align: middle; ... solution:

which is a bit better, and not perfect at all.

[dafeder]

It certainly is theme dependent, but the docs suggest this will work out of the box for RTD theme, and the docs themselves look wrong! We have resolved on our end but thought I'd suggest an upstream fix.