diff --git a/src/css/doc-bump.css b/src/css/doc-bump.css index 5e14ef54..e61cb018 100644 --- a/src/css/doc-bump.css +++ b/src/css/doc-bump.css @@ -682,10 +682,11 @@ html[data-theme=dark] { padding-bottom: 0; } +/* Mirrors .doc details > summary.title in doc.css: block layout, with room reserved for the chevron. */ .aa-DetachedOverlay .doc details > summary.title { - display: flex; - align-items: center; + display: block; position: relative; + padding-right: 2rem; border-radius: 10px; line-height: var(--doc-line-height); background: none; @@ -709,12 +710,12 @@ html[data-theme=dark] { height: 1.2em; position: absolute; right: 0; + top: 50%; + transform: translateY(-50%); } .aa-DetachedOverlay .doc details[open] > summary::after { - border-color: currentColor transparent transparent; - border-width: 0.5rem 0.3rem 0; - transform: rotate(90deg); + transform: translateY(-50%) rotate(90deg); } .aa-DetachedOverlay .doc details { diff --git a/src/css/doc.css b/src/css/doc.css index d880b984..a9f88314 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -1587,10 +1587,13 @@ html[data-theme="dark"] .listingblock .title { padding-bottom: 0; } +/* Block, not flex: a flex container makes inline code in a title its own item and splits the words around it into columns. + The right padding reserves room for the chevron so a wrapped title never runs under it. + Mirrored in doc-bump.css (.aa-DetachedOverlay) for the detached search overlay. */ .doc details > summary.title { - display: flex; - align-items: center; + display: block; position: relative; + padding-right: 2rem; border-radius: 10px; line-height: var(--doc-line-height); background: none; @@ -1618,12 +1621,12 @@ details[open] > summary { height: 1.2em; position: absolute; right: 0; + top: 50%; + transform: translateY(-50%); } .doc details[open] > summary::after { - border-color: currentColor transparent transparent; - border-width: 0.5rem 0.3rem 0; - transform: rotate(90deg); + transform: translateY(-50%) rotate(90deg); } .doc details {