diff --git a/assets/css/theme.css b/assets/css/theme.css index 313a63e00d..3fd5425bec 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -955,8 +955,13 @@ code.copy-to-clipboard-code { border-start-end-radius: 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) { - padding-inline-end: 24px; + margin-inline-end: calc(22px + var(--bpx1) * 2px); } pre:not(.mermaid) { @@ -1450,11 +1455,9 @@ html[dir='rtl'] .topbar-button-next i { border-start-end-radius: 2px; border-end-end-radius: 2px; border-end-start-radius: 0; - bottom: calc(var(--bpx1) * -1px); color: var(--INTERNAL-CODE-INLINE-color); - inset-inline-end: 0; - margin-inline-start: -22px; - position: absolute; + !inset-inline-end: 0; + margin-inline-start: calc(-1 * (22px + var(--bpx1) * 2px)); } .inline-copy-to-clipboard-button:hover { background-color: var(--INTERNAL-CODE-INLINE-color); diff --git a/layouts/partials/version.txt b/layouts/partials/version.txt index 7fcd094ace..5474a091d1 100644 --- a/layouts/partials/version.txt +++ b/layouts/partials/version.txt @@ -1 +1 @@ -7.3.2+4714e0777098da36124958f4924dcda9b87cc4ad \ No newline at end of file +7.3.2+e9c1b8ebaa0a234e2843f281738fbc7dafb23f61 \ No newline at end of file diff --git a/static/js/theme.js b/static/js/theme.js index ffba63fe49..1532f9c6c6 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -728,7 +728,12 @@ function initCodeClipboard() { code.classList.add('highlight'); code.dataset.code = text; 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); + } } } }