From 3e74985203ca6c70ef83dad9529f11d3e8a529d7 Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Tue, 15 Nov 2022 18:37:03 +0100
Subject: [PATCH] Remove forced word break from markdown view (#2142)

In `751343f` we forced words to wrap in a variety of places in the SCM-Manager to prevent unintentional overflow breaking the layout. This was also added to the markdown view which had implications for tables in these views including long headers that would now break in a not so pretty fashion. After investigating potential implications and checking other usages of the markdown view, we removed the problematic class again in this particular instance as it was seemingly not serving any positive purpose and removing it had no negative impact.
---
 .../changelog/markdown_table_header_wrap.yaml |  2 ++
 .../src/__snapshots__/storyshots.test.ts.snap | 22 +++++++++---------
 .../src/markdown/LazyMarkdownView.tsx         | 23 +++++++++++--------
 3 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 gradle/changelog/markdown_table_header_wrap.yaml

diff --git a/gradle/changelog/markdown_table_header_wrap.yaml b/gradle/changelog/markdown_table_header_wrap.yaml
new file mode 100644
index 0000000000..813c4eaef8
--- /dev/null
+++ b/gradle/changelog/markdown_table_header_wrap.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Remove forced word break from markdown view ([#2142](https://github.com/scm-manager/scm-manager/pull/2142))
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index c05a43d3d9..71144befea 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -4895,7 +4895,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <p>
@@ -4964,7 +4964,7 @@ exports[`Storyshots MarkdownView Commit Links 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <h1
@@ -5075,7 +5075,7 @@ exports[`Storyshots MarkdownView Custom code renderer 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <h1
@@ -5121,7 +5121,7 @@ exports[`Storyshots MarkdownView Default 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <h1
@@ -6543,7 +6543,7 @@ exports[`Storyshots MarkdownView Header Anchor Links 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <a
@@ -14412,7 +14412,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
     Inline xml outside of a code block is not supported
   </h2>
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <h1
@@ -14756,7 +14756,7 @@ exports[`Storyshots MarkdownView Links 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <h1
@@ -14884,7 +14884,7 @@ exports[`Storyshots MarkdownView Links without Base Path 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <h1
@@ -15011,7 +15011,7 @@ exports[`Storyshots MarkdownView Skip Html 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <h1
@@ -16352,7 +16352,7 @@ exports[`Storyshots MarkdownView XSS Prevention 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <h1
@@ -16404,7 +16404,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
   className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
 >
   <div
-    className="content is-word-break"
+    className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
   >
     <div>
       <h1
diff --git a/scm-ui/ui-components/src/markdown/LazyMarkdownView.tsx b/scm-ui/ui-components/src/markdown/LazyMarkdownView.tsx
index 38c5e612e2..7afe2effcc 100644
--- a/scm-ui/ui-components/src/markdown/LazyMarkdownView.tsx
+++ b/scm-ui/ui-components/src/markdown/LazyMarkdownView.tsx
@@ -47,6 +47,7 @@ import slug from "rehype-slug";
 import merge from "deepmerge";
 import { createComponentList } from "./createComponentList";
 import { ProtocolLinkRendererExtension, ProtocolLinkRendererExtensionMap } from "./markdownExtensions";
+import styled from "styled-components";
 
 export type MarkdownProps = {
   content: string;
@@ -95,18 +96,22 @@ const MarkdownErrorNotification: FC = () => {
   );
 };
 
+const HorizontalScrollDiv = styled.div`
+  overflow-x: auto;
+`;
+
 class LazyMarkdownView extends React.Component<Props, State> {
   static contextType = BinderContext;
 
   static defaultProps: Partial<Props> = {
     enableAnchorHeadings: false,
-    skipHtml: false
+    skipHtml: false,
   };
 
   constructor(props: Props) {
     super(props);
     this.state = {
-      contentRef: null
+      contentRef: null,
     };
   }
 
@@ -150,7 +155,7 @@ class LazyMarkdownView extends React.Component<Props, State> {
       basePath,
       permalink,
       t,
-      mdastPlugins = []
+      mdastPlugins = [],
     } = this.props;
 
     const rendererFactory = this.context.getExtension("markdown-renderer-factory");
@@ -207,27 +212,27 @@ class LazyMarkdownView extends React.Component<Props, State> {
         sanitize,
         merge(gh, {
           attributes: {
-            code: ["className"] // Allow className for code elements, this is necessary to extract the code language
+            code: ["className"], // Allow className for code elements, this is necessary to extract the code language
           },
           clobberPrefix: "", // Do not prefix user-provided ids and class names,
           protocols: {
-            href: Object.keys(protocolLinkRendererExtensions)
-          }
+            href: Object.keys(protocolLinkRendererExtensions),
+          },
         })
       )
       .use(rehype2react, {
         createElement: React.createElement,
         passNode: true,
-        components: createComponentList(remarkRendererList, { permalink })
+        components: createComponentList(remarkRendererList, { permalink }),
       });
 
     const renderedMarkdown: any = processor.processSync(content).result;
 
     return (
       <ErrorBoundary fallback={MarkdownErrorNotification}>
-        <div ref={el => this.setState({ contentRef: el })} className="content is-word-break">
+        <HorizontalScrollDiv ref={(el) => this.setState({ contentRef: el })} className="content">
           {renderedMarkdown}
-        </div>
+        </HorizontalScrollDiv>
       </ErrorBoundary>
     );
   }