fix: Line-numbering in code blocks runs horizontal on Linux

closes #4901

shared/editor/components/Styles.ts

@@ -998,6 +998,9 @@ mark {
     position: absolute;
     left: 1em;
     top: calc(1px + 0.75em);
+    width: calc(var(--line-number-gutter-width,0) * 1em + .25em);
+    word-break: break-all;
+    text-align: right;
 
     font-family: ${props.theme.fontFamilyMono};
     font-size: 13px;

shared/editor/plugins/Prism.ts

@@ -1,4 +1,4 @@
-import { flattenDeep } from "lodash";
+import { flattenDeep, padStart } from "lodash";
 import { Node } from "prosemirror-model";
 import { Plugin, PluginKey, Transaction } from "prosemirror-state";
 import { findBlockNodes } from "prosemirror-utils";
@@ -99,19 +99,20 @@ function getDecorations({
       if (lineNumbers) {
         const lineCount =
           (block.node.textContent.match(/\n/g) || []).length + 1;
+        const gutterWidth = String(lineCount).length;
 
         const lineCountText = new Array(lineCount)
           .fill(0)
-          .map((_, i) => i + 1)
-          .join("\n");
+          .map((_, i) => padStart(`${i + 1}`, gutterWidth, " "))
+          .join(" ");
 
         lineDecorations.push(
           Decoration.node(
             block.pos,
             block.pos + block.node.nodeSize,
             {
-              "data-line-numbers": lineCountText,
-              style: `--line-number-gutter-width: ${String(lineCount).length};`,
+              "data-line-numbers": `${lineCountText} `,
+              style: `--line-number-gutter-width: ${gutterWidth};`,
             },
             {
               key: `line-${lineCount}-gutter`,