optimize client side experience

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 {

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 += '<div class="line" id="L' + num + '"><a href="#L' + num + '" class="line-number">' + num + '</a><div class="line-code">' + (lines[i] || ' ') + '</div></div>';
+                    fragment.push('<div class="line" id="L' + num + '"><a href="#L' + num + '" class="line-number">' + num + '</a><div class="line-code">' + (lines[i] || ' ') + '</div></div>');
                 }
-                code.innerHTML = finalHtml;
+
+                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) => {