From e8eaaf486f1a7dc7b9b9e4d0582575de4b1fdc94 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Thu, 2 Jul 2020 11:27:46 +0200
Subject: [PATCH] use fragments instead of div to avoid layout problems

---
 .../ui-components/src/SplitAndReplace.stories.tsx   | 13 +++++++++----
 scm-ui/ui-components/src/SplitAndReplace.tsx        |  6 +++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/scm-ui/ui-components/src/SplitAndReplace.stories.tsx b/scm-ui/ui-components/src/SplitAndReplace.stories.tsx
index 69b81cc12e..a6d40a5195 100644
--- a/scm-ui/ui-components/src/SplitAndReplace.stories.tsx
+++ b/scm-ui/ui-components/src/SplitAndReplace.stories.tsx
@@ -25,6 +25,11 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import SplitAndReplace from "./SplitAndReplace";
 import { Icon } from "@scm-manager/ui-components";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin: 2rem;
+`;
 
 storiesOf("SplitAndReplace", module).add("Simple replacement", () => {
   const replacements = [
@@ -41,12 +46,12 @@ storiesOf("SplitAndReplace", module).add("Simple replacement", () => {
   ];
   return (
     <>
-      <div className={"container"}>
+      <Wrapper>
         <SplitAndReplace text={"'So this is it,` said Arthur, 'We are going to die.`"} replacements={replacements} />
-      </div>
-      <div className={"container"}>
+      </Wrapper>
+      <Wrapper>
         <SplitAndReplace text={"'Yes,` said Ford, 'except... no! Wait a minute!`"} replacements={replacements} />
-      </div>
+      </Wrapper>
     </>
   );
 });
diff --git a/scm-ui/ui-components/src/SplitAndReplace.tsx b/scm-ui/ui-components/src/SplitAndReplace.tsx
index 8fc1269e72..a3f72b553f 100644
--- a/scm-ui/ui-components/src/SplitAndReplace.tsx
+++ b/scm-ui/ui-components/src/SplitAndReplace.tsx
@@ -39,11 +39,11 @@ const textWrapper = (s: string) => {
   const first = s.startsWith(" ") ? <>&nbsp;</> : "";
   const last = s.endsWith(" ") ? <>&nbsp;</> : "";
   return (
-    <div>
+    <>
       {first}
       {s}
       {last}
-    </div>
+    </>
   );
 };
 
@@ -52,7 +52,7 @@ const SplitAndReplace: FC<Props> = ({ text, replacements }) => {
   if (parts.length === 0) {
     return <>{parts[0]}</>;
   }
-  return <div className={"media"}>{parts}</div>;
+  return <>{parts}</>;
 };
 
 export default SplitAndReplace;