diff --git a/view/static/style.css b/view/static/style.css index 6a8825e..715cb5e 100644 --- a/view/static/style.css +++ b/view/static/style.css @@ -121,10 +121,11 @@ main { .content-wrapper { flex-grow: 1; overflow-y: auto; - overflow-x: hidden; + overflow-x: auto; width: 100%; height: 100%; scroll-behavior: smooth; + contain: layout; } #paste-form { @@ -169,6 +170,9 @@ code.with-line-numbers { width: 100%; min-height: calc(1em * var(--line-height)); scroll-margin-top: 2rem; + content-visibility: auto; + contain-intrinsic-size: 1px calc(1em * var(--line-height)); + contain: paint; } .line-number { @@ -193,7 +197,7 @@ code.with-line-numbers { grid-column: 2; padding-left: 1rem; white-space: pre-wrap; - word-break: break-all; + overflow-wrap: anywhere; } .line:target { diff --git a/view/templates/bin.html b/view/templates/bin.html index 0a33de5..50e1e65 100644 --- a/view/templates/bin.html +++ b/view/templates/bin.html @@ -33,15 +33,23 @@ hljs.highlightElement(code); - if (lineCount < 5000) { + if (lineCount < 10000) { const lines = code.innerHTML.split(/\r?\n/); - let finalHtml = ''; + const fragment = []; for (let i = 0; i < lines.length; i++) { const num = i + 1; - finalHtml += '
' + num + '
' + (lines[i] || ' ') + '
'; + fragment.push('
' + num + '
' + (lines[i] || ' ') + '
'); } - code.innerHTML = finalHtml; - code.classList.add('with-line-numbers'); + + requestAnimationFrame(() => { + code.innerHTML = fragment.join(''); + code.classList.add('with-line-numbers'); + + if (window.location.hash) { + const target = document.querySelector(window.location.hash); + if (target) target.scrollIntoView(); + } + }); } document.addEventListener('keydown', (e) => {