code: finally fix initial issue with non overflowing inline code #1022

This commit is contained in:
Sören Weber 2025-02-14 23:40:12 +01:00
parent e9c1b8ebaa
commit 39e67e57ef
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 15 additions and 7 deletions

View file

@ -955,8 +955,13 @@ code.copy-to-clipboard-code {
border-start-end-radius: 0; border-start-end-radius: 0;
border-inline-end-width: 0; border-inline-end-width: 0;
} }
/* #1022 FF has issues if we set span.copy-to-clipboard to display: block;
so this is not an option; and we have to flip the elements ourself in the
JS part of the code; this will fix FF for LTR but RTL is still broken;
so at least it looks fine for most of the user base */
.inline-copy-to-clipboard-button + code.copy-to-clipboard-code,
code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button) { code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button) {
padding-inline-end: 24px; margin-inline-end: calc(22px + var(--bpx1) * 2px);
} }
pre:not(.mermaid) { pre:not(.mermaid) {
@ -1450,11 +1455,9 @@ html[dir='rtl'] .topbar-button-next i {
border-start-end-radius: 2px; border-start-end-radius: 2px;
border-end-end-radius: 2px; border-end-end-radius: 2px;
border-end-start-radius: 0; border-end-start-radius: 0;
bottom: calc(var(--bpx1) * -1px);
color: var(--INTERNAL-CODE-INLINE-color); color: var(--INTERNAL-CODE-INLINE-color);
inset-inline-end: 0; !inset-inline-end: 0;
margin-inline-start: -22px; margin-inline-start: calc(-1 * (22px + var(--bpx1) * 2px));
position: absolute;
} }
.inline-copy-to-clipboard-button:hover { .inline-copy-to-clipboard-button:hover {
background-color: var(--INTERNAL-CODE-INLINE-color); background-color: var(--INTERNAL-CODE-INLINE-color);

View file

@ -1 +1 @@
7.3.2+4714e0777098da36124958f4924dcda9b87cc4ad 7.3.2+e9c1b8ebaa0a234e2843f281738fbc7dafb23f61

View file

@ -728,7 +728,12 @@ function initCodeClipboard() {
code.classList.add('highlight'); code.classList.add('highlight');
code.dataset.code = text; code.dataset.code = text;
if (button) { if (button) {
code.parentNode.insertBefore(button, code.nextSibling); // #1022 fix for FF; see CSS for explanation
if (isRtl) {
code.parentNode.insertBefore(button, code.parentNode.firstChild);
} else {
code.parentNode.insertBefore(button, code.nextSibling);
}
} }
} }
} }