Limit photo height for committee and class council

src/components/MemberRow.tsx

@@ -2,7 +2,13 @@ import imageUrl from '../lib/imageUrl';
 import '../css/article.css';
 import RowItemHeader from './RowItemHeader';
 
-export default function MemberRow({ member }: { member: SGA.MemberDocument }) {
+export default function MemberRow({
+	member,
+	limitPhotoHeight = false,
+}: {
+	member: SGA.MemberDocument;
+	limitPhotoHeight?: boolean;
+}) {
 	let thumbnail: React.ReactElement | null = null;
 	if (member.profile_photo) {
 		thumbnail = (
@@ -12,7 +18,15 @@ export default function MemberRow({ member }: { member: SGA.MemberDocument }) {
 
 	return (
 		<div className='d-flex my-4'>
-			<div className='article-row-thumbnail'>{thumbnail}</div>
+			<div
+				className={
+					limitPhotoHeight
+						? 'article-row-thumbnail-height-constrained'
+						: 'article-row-thumbnail'
+				}
+			>
+				{thumbnail}
+			</div>
 			<div className='article-row-content'>
 				<RowItemHeader>{member.name}</RowItemHeader>
 				<i>

src/css/article.css

@@ -3,11 +3,17 @@
   flex-direction: column;
 }
 
-.article-row-thumbnail {
+.article-row-thumbnail,
+.article-row-thumbnail-height-constrained {
   flex: 1;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   padding-right: 1em;
+  text-align: center;
+}
+
+.article-row-thumbnail-height-constrained>img {
+  max-height: 200px;
 }
 
 .article-row-content {

src/pages/classcouncil.tsx

@@ -50,7 +50,11 @@ export default function ClassCouncil() {
 					<>
 						<PrimaryHeader>Class Council {year}</PrimaryHeader>
 						{members.map((member) => (
-							<MemberRow key={member._id} member={member}></MemberRow>
+							<MemberRow
+								limitPhotoHeight
+								key={member._id}
+								member={member}
+							></MemberRow>
 						))}
 					</>
 				))}

src/pages/committee.tsx

@@ -18,7 +18,7 @@ export default function Committee() {
 			/>
 			<main>
 				{excomm.map((member) => (
-					<MemberRow key={member._id} member={member} />
+					<MemberRow limitPhotoHeight key={member._id} member={member} />
 				))}
 			</main>
 		</>