🐛 BUG: Fixing overlapping title on hidden admonitions

docs/index.rst

@@ -204,3 +204,16 @@ Here's how they look right after one another:
 .. toggle::
 
     This is my second.
+
+.. admonition:: A really long admonition that will take up multiple lines A really long admonition that will take up multiple lines
+    :class: toggle
+
+    Admonition content.
+
+    .. image:: https://jupyterbook.org/_static/logo.png
+
+.. admonition:: A really long admonition that will take up multiple lines A really long admonition that will take up multiple lines
+
+    Admonition content.
+
+    .. image:: https://jupyterbook.org/_static/logo.png

sphinx_togglebutton/_static/togglebutton.css_t

@@ -12,11 +12,17 @@
 }
 
 /* Overrides for admonition toggles */
-div.admonition.toggle-hidden {
-    height: 3em;
+
+/* Titles should cut off earlier to avoid overlapping w/ button */
+div.admonition.toggle p.admonition-title {
+    padding-right: 20%;
 }
 
+/* hides all the content of a page until de-toggled */
 div.admonition.toggle-hidden .admonition-title ~ * {
+    height: 0;
+    margin: 0;
+    float: left; /* so they overlap when hidden */
     opacity: 0;
     visibility: hidden;
 }