Tweak EventAgenda display

opportunity-hack · Dec 28, 2023 · 0aab36e · 0aab36e
1 parent 17eb256
commit 0aab36e
Showing 1 changed file with 12 additions and 10 deletions.
diff --git a/app/components/EventAgenda.tsx b/app/components/EventAgenda.tsx
@@ -41,16 +41,18 @@ function PositionStatus({ volunteerType, event }: PositionStatusProps) {
 
 export function EventAgenda({ event }: { event: EventWithVolunteers }) {
 	return (
-		<div className="flex min-w-[20rem] gap-4">
-			<div className="grow basis-40">{event.title}</div>
-			<div className="flex shrink-0 basis-72 flex-col text-sm">
-				{volunteerTypes.map(volunteerType => (
-					<PositionStatus
-						key={volunteerType.field}
-						volunteerType={volunteerType}
-						event={event}
-					/>
-				))}
+		<div className="flex min-w-[25rem] gap-4">
+			<div className="shrink-0 grow basis-40">{event.title}</div>
+			<div className="flex shrink-0 grow basis-72 flex-col text-sm">
+				<div className="max-w-sm">
+					{volunteerTypes.map(volunteerType => (
+						<PositionStatus
+							key={volunteerType.field}
+							volunteerType={volunteerType}
+							event={event}
+						/>
+					))}
+				</div>
 			</div>
 		</div>
 	)