From 018900ab740f125792b247ead317014146148bd0 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Sat, 20 Feb 2021 13:47:45 -0500
Subject: [PATCH] chat: positively apply margins to mentions

Fixes urbit/landscape#468
---
 .../src/views/apps/chat/components/ChatMessage.tsx          | 2 +-
 pkg/interface/src/views/components/MentionText.tsx          | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index 340bd4f3bb..d56c284258 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -448,7 +448,7 @@ export const Message = ({
               const first = (i) => (i === 0);
               return (
                 <Mention
-                  marginLeft={first(i) ? "-4px" : "0"}
+                  first={first(i)}
                   group={group}
                   scrollWindow={scrollWindow}
                   ship={content.mention}
diff --git a/pkg/interface/src/views/components/MentionText.tsx b/pkg/interface/src/views/components/MentionText.tsx
index eca48d300f..6f1ddd244b 100644
--- a/pkg/interface/src/views/components/MentionText.tsx
+++ b/pkg/interface/src/views/components/MentionText.tsx
@@ -38,8 +38,9 @@ export function Mention(props: {
   group: Group;
   scrollWindow?: HTMLElement;
   ship: string;
+  first?: Boolean;
 }) {
-  const { contacts, ship, scrollWindow, ...rest } = props;
+  const { contacts, ship, scrollWindow, first, ...rest } = props;
   let { contact } = props;
   contact = contact?.color ? contact : contacts?.[ship];
   const history = useHistory();
@@ -56,7 +57,8 @@ export function Mention(props: {
     <Box position='relative' display='inline-block' cursor='pointer' {...rest}>
       <Text
         onClick={() => toggleOverlay()}
-        mx={1}
+        marginLeft={first? 0 : 1}
+        marginRight={1}
         px={1}
         bg='washedBlue'
         color='blue'