fix(threads): let the thread members popout scroll (#3298)

fluxer_app/src/features/threads/components/ThreadSidePanel.module.css

@@ -80,13 +80,28 @@
 }
 
 .membersPopout {
+	--thread-members-popout-max-height: 30rem;
+	--thread-members-popout-padding-block: 0.5rem;
+	--thread-members-popout-border-width: 0.0625rem;
 	display: flex;
 	flex-direction: column;
 	width: 16.5rem;
-	max-height: 30rem;
-	padding: 0.5rem 0;
-	border: 0.0625rem solid var(--background-modifier-accent);
+	max-height: var(--thread-members-popout-max-height);
+	padding: var(--thread-members-popout-padding-block) 0;
+	border: var(--thread-members-popout-border-width) solid var(--background-modifier-accent);
 	border-radius: 0.5rem;
 	background: var(--background-secondary);
 	overflow: hidden;
 }
+
+.membersPopoutList {
+	width: 100%;
+	height: auto;
+	max-height: calc(
+		var(--thread-members-popout-max-height) -
+		2 *
+		var(--thread-members-popout-padding-block) -
+		2 *
+		var(--thread-members-popout-border-width)
+	);
+}

fluxer_app/src/features/threads/components/ThreadSidePanel.tsx

@@ -61,7 +61,11 @@ const ThreadMembersButton = observer(({thread}: {thread: Channel}) => {
 			position="bottom-end"
 			render={() => (
 				<div className={styles.membersPopout} data-flx="threads.thread-side-panel.members-popout">
-					<MemberListContainer channelId={thread.id} data-flx="threads.thread-side-panel.member-list-container">
+					<MemberListContainer
+						channelId={thread.id}
+						className={styles.membersPopoutList}
+						data-flx="threads.thread-side-panel.member-list-container"
+					>
 						<ThreadMembersList thread={thread} data-flx="threads.thread-side-panel.thread-members-list" />
 					</MemberListContainer>
 				</div>