From 0989f8e681462fb48d4a13b81d85f00152803c06 Mon Sep 17 00:00:00 2001
From: Valentin Jonovs <valentin@jonovs.com>
Date: Tue, 8 Oct 2019 11:58:35 +0200
Subject: [PATCH] fix: Prevent text highlighting overlap between chips (#188)

---
 .../strategy-input-list-test.jsx.snap         | 75 ++++++++++++-------
 .../feature/form/strategy-input-list.jsx      | 21 +++---
 2 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap b/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap
index 5cf83c499b..97275c51d9 100644
--- a/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap
+++ b/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-input-list-test.jsx.snap
@@ -5,24 +5,32 @@ exports[`renders correctly when disabled 1`] = `
   <p>
     featureName
   </p>
-  <react-mdl-Chip
+  <div
     style={
       Object {
-        "marginRight": "3px",
+        "display": "flex",
       }
     }
   >
-    item1
-  </react-mdl-Chip>
-  <react-mdl-Chip
-    style={
-      Object {
-        "marginRight": "3px",
+    <react-mdl-Chip
+      style={
+        Object {
+          "marginRight": "3px",
+        }
       }
-    }
-  >
-    item2
-  </react-mdl-Chip>
+    >
+      item1
+    </react-mdl-Chip>
+    <react-mdl-Chip
+      style={
+        Object {
+          "marginRight": "3px",
+        }
+      }
+    >
+      item2
+    </react-mdl-Chip>
+  </div>
   
 </div>
 `;
@@ -32,6 +40,13 @@ exports[`renders strategy with empty list as param 1`] = `
   <p>
     featureName
   </p>
+  <div
+    style={
+      Object {
+        "display": "flex",
+      }
+    }
+  />
   <div
     style={
       Object {
@@ -73,26 +88,34 @@ exports[`renders strategy with list as param 1`] = `
   <p>
     featureName
   </p>
-  <react-mdl-Chip
-    onClose={[Function]}
+  <div
     style={
       Object {
-        "marginRight": "3px",
+        "display": "flex",
       }
     }
   >
-    item1
-  </react-mdl-Chip>
-  <react-mdl-Chip
-    onClose={[Function]}
-    style={
-      Object {
-        "marginRight": "3px",
+    <react-mdl-Chip
+      onClose={[Function]}
+      style={
+        Object {
+          "marginRight": "3px",
+        }
       }
-    }
-  >
-    item2
-  </react-mdl-Chip>
+    >
+      item1
+    </react-mdl-Chip>
+    <react-mdl-Chip
+      onClose={[Function]}
+      style={
+        Object {
+          "marginRight": "3px",
+        }
+      }
+    >
+      item2
+    </react-mdl-Chip>
+  </div>
   <div
     style={
       Object {
diff --git a/frontend/src/component/feature/form/strategy-input-list.jsx b/frontend/src/component/feature/form/strategy-input-list.jsx
index cdfd9610f2..f111fa810b 100644
--- a/frontend/src/component/feature/form/strategy-input-list.jsx
+++ b/frontend/src/component/feature/form/strategy-input-list.jsx
@@ -54,15 +54,18 @@ export default class InputList extends Component {
         return (
             <div>
                 <p>{name}</p>
-                {list.map((entryValue, index) => (
-                    <Chip
-                        key={index + entryValue}
-                        style={{ marginRight: '3px' }}
-                        onClose={disabled ? undefined : () => this.onClose(index)}
-                    >
-                        {entryValue}
-                    </Chip>
-                ))}
+
+                <div style={{ display: 'flex' }}>
+                    {list.map((entryValue, index) => (
+                        <Chip
+                            key={index + entryValue}
+                            style={{ marginRight: '3px' }}
+                            onClose={disabled ? undefined : () => this.onClose(index)}
+                        >
+                            {entryValue}
+                        </Chip>
+                    ))}
+                </div>
 
                 {disabled ? (
                     ''