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

Revert "Dynamic width of code box line numbers"

This reverts commit d3853740d8304f9703876006db990c2e01642656.
---

diff --git a/ts/WoltLabSuite/Core/Bbcode/Code.ts b/ts/WoltLabSuite/Core/Bbcode/Code.ts
index 4ec1e507bb..f8d1547942 100644
--- a/ts/WoltLabSuite/Core/Bbcode/Code.ts
+++ b/ts/WoltLabSuite/Core/Bbcode/Code.ts
@@ -37,8 +37,6 @@ 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 {
@@ -134,27 +132,6 @@ 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 3bfd0f3228..b42f4b792a 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bbcode/Code.js
@@ -30,7 +30,6 @@ 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) => {
@@ -102,23 +101,6 @@ 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 f6e80f71ac..4cee52faaa 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: calc((var(--line-number-width, 6) + 1) * 1ch);
+		padding-left: 7ch;
 
 		> code {
 			display: block;
@@ -132,13 +132,14 @@
 				display: block;
 
 				> a {
-					margin-left: calc((var(--line-number-width, 6) + 1) * -1ch);
+					margin-left: -7ch;
 					overflow: hidden;
 					position: absolute;
 					text-align: right;
 					text-overflow: ellipsis;
 					white-space: nowrap;
-					width: calc(var(--line-number-width, 6) * 1ch);
+					/* No one has line numbers greater than 999999 */
+					width: 6ch;
 
 					&::before {
 						content: attr(title);