From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 15 May 2022 10:37:51 +0000 (+0200)
Subject: Dynamic width of code box line numbers
X-Git-Tag: 5.5.0_Beta_3~30
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=d3853740d8304f9703876006db990c2e01642656;p=GitHub%2FWoltLab%2FWCF.git

Dynamic width of code box line numbers

This avoids indenting short code listings too much, especially on screens with limited space.
---

diff --git a/ts/WoltLabSuite/Core/Bbcode/Code.ts b/ts/WoltLabSuite/Core/Bbcode/Code.ts
index f8d1547942..4ec1e507bb 100644
--- a/ts/WoltLabSuite/Core/Bbcode/Code.ts
+++ b/ts/WoltLabSuite/Core/Bbcode/Code.ts
@@ -37,6 +37,8 @@ class Code {
     this.language = Array.from(this.codeContainer.classList)
       .find((klass) => /^language-([a-z0-9_-]+)$/.test(klass))
       ?.replace(/^language-/, "");
+
+    this.calculateLineNumberWidth();
   }
 
   public static processAll(): void {
@@ -132,6 +134,27 @@ class Code {
     this.container.classList.remove("highlighting");
     this.container.classList.add("highlighted");
   }
+
+  private calculateLineNumberWidth(): void {
+    if (!this.codeContainer) {
+      return;
+    }
+
+    let maxLength = 0;
+    this.codeContainer.querySelectorAll(".lineAnchor").forEach((anchor: HTMLAnchorElement) => {
+      const length = anchor.title.length;
+      if (length > maxLength) {
+        maxLength = length;
+      }
+    });
+
+    // Clamp the max length to 6 (up to line 999,999) to prevent layout issues.
+    if (maxLength > 6) {
+      maxLength = 6;
+    }
+
+    this.container.style.setProperty("--line-number-width", maxLength.toString());
+  }
 }
 
 export = Code;
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
index b42f4b792a..3bfd0f3228 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
@@ -30,6 +30,7 @@ define(["require", "exports", "tslib", "../Language", "../Clipboard", "../Ui/Not
             this.codeContainer = this.container.querySelector(".codeBoxCode > code");
             this.language = (_a = Array.from(this.codeContainer.classList)
                 .find((klass) => /^language-([a-z0-9_-]+)$/.test(klass))) === null || _a === void 0 ? void 0 : _a.replace(/^language-/, "");
+            this.calculateLineNumberWidth();
         }
         static processAll() {
             document.querySelectorAll(".codeBox:not([data-processed])").forEach((codeBox) => {
@@ -101,6 +102,23 @@ define(["require", "exports", "tslib", "../Language", "../Clipboard", "../Ui/Not
             this.container.classList.remove("highlighting");
             this.container.classList.add("highlighted");
         }
+        calculateLineNumberWidth() {
+            if (!this.codeContainer) {
+                return;
+            }
+            let maxLength = 0;
+            this.codeContainer.querySelectorAll(".lineAnchor").forEach((anchor) => {
+                const length = anchor.title.length;
+                if (length > maxLength) {
+                    maxLength = length;
+                }
+            });
+            // Clamp the max length to 6 (up to line 999,999) to prevent layout issues.
+            if (maxLength > 6) {
+                maxLength = 6;
+            }
+            this.container.style.setProperty("--line-number-width", maxLength.toString());
+        }
     }
     Code.chunkSize = 50;
     return Code;
diff --git a/wcfsetup/install/files/style/bbcode/code.scss b/wcfsetup/install/files/style/bbcode/code.scss
index 4cee52faaa..f6e80f71ac 100644
--- a/wcfsetup/install/files/style/bbcode/code.scss
+++ b/wcfsetup/install/files/style/bbcode/code.scss
@@ -120,7 +120,7 @@
 
 	.codeBoxCode {
 		position: relative;
-		padding-left: 7ch;
+		padding-left: calc((var(--line-number-width, 6) + 1) * 1ch);
 
 		> code {
 			display: block;
@@ -132,14 +132,13 @@
 				display: block;
 
 				> a {
-					margin-left: -7ch;
+					margin-left: calc((var(--line-number-width, 6) + 1) * -1ch);
 					overflow: hidden;
 					position: absolute;
 					text-align: right;
 					text-overflow: ellipsis;
 					white-space: nowrap;
-					/* No one has line numbers greater than 999999 */
-					width: 6ch;
+					width: calc(var(--line-number-width, 6) * 1ch);
 
 					&::before {
 						content: attr(title);