From ec7d8462f618f0e031db9debf68753f4621acf58 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Sat, 20 Feb 2021 10:51:43 -0500
Subject: [PATCH] chat: conditionally marginalize mention

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

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index dd1cfea7f5..340bd4f3bb 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -445,8 +445,10 @@ export const Message = ({
                 </Box>
               );
             case 'mention':
+              const first = (i) => (i === 0);
               return (
                 <Mention
+                  marginLeft={first(i) ? "-4px" : "0"}
                   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 689b489de2..eca48d300f 100644
--- a/pkg/interface/src/views/components/MentionText.tsx
+++ b/pkg/interface/src/views/components/MentionText.tsx
@@ -39,7 +39,7 @@ export function Mention(props: {
   scrollWindow?: HTMLElement;
   ship: string;
 }) {
-  const { contacts, ship, scrollWindow } = props;
+  const { contacts, ship, scrollWindow, ...rest } = props;
   let { contact } = props;
   contact = contact?.color ? contact : contacts?.[ship];
   const history = useHistory();
@@ -53,7 +53,7 @@ export function Mention(props: {
   }, [showOverlay]);
 
   return (
-    <Box position='relative' display='inline-block' cursor='pointer'>
+    <Box position='relative' display='inline-block' cursor='pointer' {...rest}>
       <Text
         onClick={() => toggleOverlay()}
         mx={1}