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

fluxer_app/src/features/channel/components/MemberListContainer.tsx

@@ -6,6 +6,7 @@ import {MEMBERS_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescript
 import {Scroller, type ScrollerHandle} from '@app/features/ui/components/Scroller';
 import KeyboardMode from '@app/features/ui/state/KeyboardMode';
 import {useLingui} from '@lingui/react/macro';
+import {clsx} from 'clsx';
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
 import type {UIEvent} from 'react';
@@ -16,6 +17,7 @@ interface MemberListContainerProps {
 	channelId: string;
 	identityKey?: string;
 	children: React.ReactNode;
+	className?: string;
 	scrollerRef?: React.RefObject<ScrollerHandle | null>;
 	estimatedContentSize?: number | null;
 	onScroll?: (event: UIEvent<HTMLDivElement>) => void;
@@ -26,6 +28,7 @@ export const MemberListContainer: React.FC<MemberListContainerProps> = observer(
 	channelId,
 	identityKey,
 	children,
+	className,
 	scrollerRef,
 	estimatedContentSize,
 	onScroll,
@@ -43,7 +46,7 @@ export const MemberListContainer: React.FC<MemberListContainerProps> = observer(
 	return (
 		<aside
 			ref={navigationRef}
-			className={styles.memberListContainer}
+			className={clsx(styles.memberListContainer, className)}
 			aria-label={i18n._(MEMBERS_DESCRIPTOR)}
 			data-flx="channel.member-list-container.member-list-container"
 		>

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;
+	max-height: var(--thread-members-popout-max-height);
-	padding: 0.5rem 0;
+	padding: var(--thread-members-popout-padding-block) 0;
-	border: 0.0625rem solid var(--background-modifier-accent);
+	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>