diff --git a/app/components/Collaborators/Collaborators.js b/app/components/Collaborators/Collaborators.js
index 42b5f0d97..d7eaf16e2 100644
--- a/app/components/Collaborators/Collaborators.js
+++ b/app/components/Collaborators/Collaborators.js
@@ -29,7 +29,9 @@ const Collaborators = ({ document }: Props) => {
     <Avatars>
       <StyledTooltip tooltip={tooltip} placement="bottom">
         {collaborators.map(user => (
-          <Avatar key={user.id} src={user.avatarUrl} />
+          <AvatarWrapper>
+            <Avatar key={user.id} src={user.avatarUrl} />
+          </AvatarWrapper>
         ))}
       </StyledTooltip>
     </Avatars>
@@ -41,17 +43,19 @@ const StyledTooltip = styled(Tooltip)`
   flex-direction: row-reverse;
 `;
 
-const Avatars = styled(Flex)`
-  align-items: center;
-  flex-direction: row-reverse;
+const AvatarWrapper = styled.div`
+  width: 24px;
+  height: 24px;
+  margin-right: -10px;
 
-  ${Avatar} & {
-    margin-right: -10px;
-  }
-
-  ${Avatar} &:first-child {
+  &:first-child {
     margin-right: 0;
   }
 `;
 
+const Avatars = styled(Flex)`
+  align-items: center;
+  flex-direction: row-reverse;
+`;
+
 export default Collaborators;