fix: user mentions overflow

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`

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"