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.

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))

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

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>
     );
   }