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>
 
+						<span>Member count: {group.users.length}</span>
+
+						<div
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								overflowY: 'auto',
+								padding: '2rem 0.5rem',
+								textAlign: 'left',
+							}}
+						>
 							{group.users.map(({ name, id }) => (
-							<span key={id}>
+								<div
-								{name} {adminIds.has(id) && ' (admin)'}{' '}
+									key={id}
+									style={{
+										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 as admin
+												Remove admin
 											</button>
 										) : (
 											<button onClick={() => addAdmin(id, name)}>
-											Add as admin
+												Make admin
 											</button>
 										))}
-							</span>
+								</div>
 							))}
-						<br />
+						</div>
 
 						<GroupInviteCode />
 					</UISecondaryBox>