use fragments instead of div to avoid layout problems

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

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;