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"