From 1802a4438c569a64db9f2ee675103516e8ee6b9c Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Fri, 26 Jul 2024 14:29:34 +1000
Subject: [PATCH] fix: user mentions overflow

---
 ts/components/MemberListItem.tsx                        | 2 ++
 ts/components/conversation/composition/UserMentions.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx
index 41ca9bcfd..952c9fb49 100644
--- a/ts/components/MemberListItem.tsx
+++ b/ts/components/MemberListItem.tsx
@@ -43,6 +43,8 @@ const StyledSessionMemberItem = styled.button<{
   &:not(button:last-child) {
     border-bottom: 1px solid var(--border-color);
   }
+
+  ${props => props.inMentions && 'max-width: 300px;'}
 `;
 
 const StyledInfo = styled.div`
diff --git a/ts/components/conversation/composition/UserMentions.tsx b/ts/components/conversation/composition/UserMentions.tsx
index e0b2cebf2..b0c8f76fa 100644
--- a/ts/components/conversation/composition/UserMentions.tsx
+++ b/ts/components/conversation/composition/UserMentions.tsx
@@ -39,8 +39,8 @@ export const styleForCompositionBoxSuggestions = (dir: HTMLDirection = 'ltr') =>
 export const renderUserMentionRow = (suggestion: SuggestionDataItem) => {
   return (
     <MemberListItem
+      key={`suggestion-list-${suggestion.id}`}
       isSelected={false}
-      key={suggestion.id}
       pubkey={`${suggestion.id}`}
       inMentions={true}
       dataTestId="mentions-popup-row"