From 35a8cefc1458cc1b46566ae6d2691cc99b9da050 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Wed, 6 Jan 2021 00:38:11 -0500
Subject: [PATCH] Limit photo height for committee and class council

---
 src/components/MemberRow.tsx | 18 ++++++++++++++++--
 src/css/article.css          |  8 +++++++-
 src/pages/classcouncil.tsx   |  6 +++++-
 src/pages/committee.tsx      |  2 +-
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/MemberRow.tsx b/src/components/MemberRow.tsx
index 047df2d..3b15c10 100644
--- a/src/components/MemberRow.tsx
+++ b/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>
diff --git a/src/css/article.css b/src/css/article.css
index 253b0bf..dce596d 100644
--- a/src/css/article.css
+++ b/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 {
diff --git a/src/pages/classcouncil.tsx b/src/pages/classcouncil.tsx
index 578a58e..894b01a 100644
--- a/src/pages/classcouncil.tsx
+++ b/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>
 						))}
 					</>
 				))}
diff --git a/src/pages/committee.tsx b/src/pages/committee.tsx
index 2ebb424..d830fe4 100644
--- a/src/pages/committee.tsx
+++ b/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>
 		</>