From 24c39faedd77d5074bf80e527ec6b50527111ade Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Tue, 9 Jun 2020 16:38:20 +0200
Subject: [PATCH] improve avatar spacing

---
 .../src/repos/changesets/ChangesetAuthor.tsx  | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx
index bb9a58ac95..d2bc793be4 100644
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx
@@ -46,10 +46,15 @@ const useAvatar = (person: Person): string | undefined => {
   }
 };
 
+const AvatarList = styled.span`
+  & > :not(:last-child) {
+    margin-right: 0.25em;
+  }
+`;
+
 const AvatarImage = styled(Image)`
   width: 1em;
   height: 1em;
-  margin-right: 0.25em;
   vertical-align: middle !important;
   margin-bottom: 0.2em;
   border-radius: 0.25em;
@@ -112,9 +117,11 @@ const Persons: FC<PersonsProps> = ({ persons, label, displayTextOnly }) => {
     return (
       <>
         {t(label)}{" "}
-        {persons.map(p => (
-          <PersonAvatar person={p} avatar={avatarFactory(p)} />
-        ))}
+        <AvatarList>
+          {persons.map(p => (
+            <PersonAvatar person={p} avatar={avatarFactory(p)} />
+          ))}
+        </AvatarList>
       </>
     );
   } else {
@@ -148,11 +155,7 @@ const ChangesetAuthor: FC<Props> = ({ changeset }) => {
   const authorLine = [];
   if (changeset.author) {
     authorLine.push(
-      <Persons
-        persons={[changeset.author]}
-        label={"changesets.authors.authoredBy"}
-        displayTextOnly={true}
-      />
+      <Persons persons={[changeset.author]} label={"changesets.authors.authoredBy"} displayTextOnly={true} />
     );
   }