make group members list scrollable

src/components/Group/GroupMembersLink.tsx

@@ -53,27 +53,48 @@ export default function GroupMembersLink() {
 						style={{
 							textAlign: 'center',
 							backgroundColor: '#fdfdfd',
+							maxHeight: 'calc(100vh - 4rem)',
+							position: 'relative',
 						}}
-						cancelClicks
 					>
 						<h3>Members</h3>
 
-						{group.users.map(({ name, id }) => (
+						<span>Member count: {group.users.length}</span>
-							<span key={id}>
+
-								{name} {adminIds.has(id) && ' (admin)'}{' '}
+						<div
-								{amIAdmin &&
+							style={{
-									(adminIds.has(id) ? (
+								display: 'flex',
-										<button onClick={() => removeAdmin(id)}>
+								flexDirection: 'column',
-											Remove as admin
+								overflowY: 'auto',
-										</button>
+								padding: '2rem 0.5rem',
-									) : (
+								textAlign: 'left',
-										<button onClick={() => addAdmin(id, name)}>
+							}}
-											Add as admin
+						>
-										</button>
+							{group.users.map(({ name, id }) => (
-									))}
+								<div
-							</span>
+									key={id}
-						))}
+									style={{
-						<br />
+										display: 'flex',
+										justifyContent: 'space-between',
+										margin: '0.5rem 0',
+									}}
+								>
+									<span>
+										{name} {adminIds.has(id) && ' (admin)'}
+									</span>
+									{amIAdmin &&
+										(adminIds.has(id) ? (
+											<button onClick={() => removeAdmin(id)}>
+												Remove admin
+											</button>
+										) : (
+											<button onClick={() => addAdmin(id, name)}>
+												Make admin
+											</button>
+										))}
+								</div>
+							))}
+						</div>
 
 						<GroupInviteCode />
 					</UISecondaryBox>