feat: fixed member layout in invite contancts and remove mods modals

stylesheets/_mentions.scss

@@ -1,10 +1,3 @@
-// used for the list after adding a `@` in the compose text input
-.contact-selection-list {
-  max-height: 240px;
-  overflow-y: auto;
-  margin: 4px;
-}
-
 .module-conversation-list-item--mentioned-us {
   border-left: 4px solid var(--conversation-tab-color-strip-color) !important;
 }

stylesheets/_modal.scss

@@ -27,12 +27,6 @@
 }
 
 .session-modal {
-  .contact-selection-list {
-    width: 100%;
-    min-width: 300px;
-    max-width: 350px;
-  }
-
   &__input-group {
     min-width: 300px;
 
@@ -47,8 +41,7 @@
 }
 
 .add-moderators-dialog,
-.remove-moderators-dialog,
-.invite-friends-dialog {
+.remove-moderators-dialog {
   .content {
     max-width: 100% !important;
   }

stylesheets/_session.scss

@@ -405,7 +405,10 @@ input {
 .contact-selection-list {
   display: flex;
   flex-direction: column;
-  width: 20vw;
+  width: 400px;
+  max-height: 240px;
+  overflow-y: auto;
+  margin: var(--margins-sm);
 }
 
 .session-confirm-wrapper {

ts/components/dialog/InviteContactsDialog.tsx

@@ -165,7 +165,7 @@ const InviteContactsDialogInner = (props: Props) => {
         {hasContacts ? (
           validContactsForInvite.map((member: string) => (
             <MemberListItem
-              key={member}
+              key={`contacts-list-${member}`}
               pubkey={member}
               isSelected={selectedContacts.includes(member)}
               onSelect={addTo}

ts/components/dialog/ModeratorsRemoveDialog.tsx

@@ -85,7 +85,7 @@ export const RemoveModeratorsDialog = (props: Props) => {
           <div className="contact-selection-list">
             {existingMods.map(modId => (
               <MemberListItem
-                key={modId}
+                key={`mod-list-${modId}`}
                 pubkey={modId}
                 isSelected={modsToRemove.some(m => m === modId)}
                 onSelect={(selectedMember: string) => {