wip

app/components/Actions/Actions.js

@@ -7,6 +7,7 @@ export const Action = styled(Flex)`
   justify-content: center;
   align-items: center;
   padding: 0 0 0 12px;
+  font-size: 15px;
 
   a {
     color: ${props => props.theme.text};
@@ -37,8 +38,7 @@ const Actions = styled(Flex)`
 
   ${breakpoint('tablet')`
     left: auto;
-    padding: ${props => props.theme.vpadding} ${props =>
-    props.theme.hpadding} 8px 8px;
+    padding: ${props => props.theme.vpadding} ${props => props.theme.hpadding};
   `};
 `;
 

app/components/Collaborators/Collaborators.js

@@ -31,22 +31,21 @@ const Collaborators = ({ document }: Props) => {
 
   return (
     <Avatars>
-      <StyledTooltip tooltip={tooltip} placement="bottom">
-        {collaborators.map(user => (
-          <AvatarWrapper key={user.id}>
+      {collaborators.map(user => (
+        <Tooltip
+          tooltip={collaborators.length > 1 ? user.name : tooltip}
+          placement="bottom"
+          key={user.id}
+        >
+          <AvatarWrapper>
             <Avatar src={user.avatarUrl} />
           </AvatarWrapper>
-        ))}
-      </StyledTooltip>
+        </Tooltip>
+      ))}
     </Avatars>
   );
 };
 
-const StyledTooltip = styled(Tooltip)`
-  display: flex;
-  flex-direction: row-reverse;
-`;
-
 const AvatarWrapper = styled.div`
   width: 24px;
   height: 24px;