From dc3b1a2cacbe467cfff656f98c0a4b4fe0ec8619 Mon Sep 17 00:00:00 2001
From: JP1998 <littlebigjonny06@gmail.com>
Date: Tue, 16 Apr 2019 19:17:28 +0200
Subject: [PATCH] Fix design with white borders being visible while dragging
 teams

---
 js/components/EditableStringList.js |  1 +
 static/css/editablestringlist.css   | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/js/components/EditableStringList.js b/js/components/EditableStringList.js
index 356fafb..38e7cf7 100644
--- a/js/components/EditableStringList.js
+++ b/js/components/EditableStringList.js
@@ -198,6 +198,7 @@ class GroupView extends React.Component {
                             <CardTitle>Group {groupindex + 1}</CardTitle>
                             {group.map((team, teamindex) => (
                                 <div key={team} draggable droppable="droppable"
+                                    className="grouped-team-item"
                                     onDragStart={(e) => this.onDragStart(e, groupindex,teamindex)}
                                     onDragOver={(e) => this.onDragOver(e)}
                                     onDrop={(e) => this.onDrop(e, groupindex, teamindex)}>
diff --git a/static/css/editablestringlist.css b/static/css/editablestringlist.css
index d464abd..b0012b0 100644
--- a/static/css/editablestringlist.css
+++ b/static/css/editablestringlist.css
@@ -10,6 +10,16 @@
     display: inline-block;
 }
 
-.group-card .team-item {
+.grouped-team-item {
     display: block;
+    margin-bottom: .5rem;
+    border-radius: .25rem;
+}
+
+.grouped-team-item:last-child {
+    margin-bottom: 0px;
+}
+
+.grouped-team-item > .m-2 {
+    margin: 0 !important;
 }