Fix copying source code in Firefox incorrectly adding extra line breaks

There is an open bug in Firefox which causes extra line breaks to appear when copying if the selection contains a `span` with the `user-select: none;` styles.
This workaround removes this style and displays the line number in a `::before` instead. This has the same effect of the user not being able to select it and it also doesn't show up in multi-line selections but prevents Firefox from interpreting it incorrectly.

Committed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

gradle/changelog/firefox_line_copying.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Copying source code in Firefox incorrectly adds extra line breaks

scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx

@@ -31,17 +31,6 @@ import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
 
 const RowContainer = styled.div`
-  .linenumber {
-    display: inline-block;
-    min-width: 3em;
-    padding-right: 0.75em;
-    text-align: right;
-    user-select: none;
-    color: var(--scm-secondary-text);
-  }
-  span.linenumber:hover {
-    cursor: pointer;
-  }
   span.linenumber + span > span.linenumber {
     display: none !important;
   }
@@ -70,6 +59,20 @@ const RowContainer = styled.div`
   }
 `;
 
+const LineNumber = styled.span<{ value: number }>`
+  display: inline-block;
+  min-width: 3em;
+  padding-right: 0.75em;
+  text-align: right;
+  color: var(--scm-secondary-text);
+  &:hover {
+    cursor: pointer;
+  }
+  &::before {
+    content: "${({ value }) => `${value}`}";
+  }
+`;
+
 type CreateLinePermaLinkFn = (lineNumber: number) => string;
 
 type ExternalProps = {
@@ -127,12 +130,11 @@ const SyntaxHighlighterRenderer: FC<Props> = ({ children: rows, createLinePermaL
                     />
                   </Tooltip>
                 )}
-                <span
+                <LineNumber
                   onClick={() => history.push(location.pathname + "#line-" + lineNumber)}
                   className="linenumber react-syntax-highlighter-line-number"
-                >
-                  {lineNumber}
-                </span>
+                  value={lineNumber}
+                />
               </>
             )}
             {line}