show carpool note + improve uix

src/components/Carpool/Carpool.tsx

@@ -195,7 +195,11 @@ export default function Carpool({ id }: { id: number }) {
 			}}
 		>
 			<UISecondaryBox
-				style={{ width: '45rem', maxWidth: '100vw', alignItems: 'center' }}
+				style={{
+					width: '45rem',
+					maxWidth: 'min(45rem, 100vw)',
+					alignItems: 'center',
+				}}
 			>
 				<h1>{carpool.name}</h1>
 				{isCreator

src/components/Carpool/CarpoolDetails.tsx

@@ -19,7 +19,7 @@ export default function CarpoolDetails() {
 	);
 
 	return (
-		<div>
+		<div style={{ width: '80%' }}>
 			<div
 				style={{
 					color: '#303030',

src/components/Carpool/CarpoolNote.tsx

@@ -1,10 +1,9 @@
+import CancelIcon from '@material-ui/icons/Clear';
+import DoneIcon from '@material-ui/icons/Done';
+import EditIcon from '@material-ui/icons/Edit';
 import { useCallback, useEffect, useState } from 'react';
-import UIPressable from '../UI/UIPressable';
 import UITextInput from '../UI/UITextInput';
 import useIsCreator from './useIsCreator';
-import EditIcon from '@material-ui/icons/Edit';
-import DoneIcon from '@material-ui/icons/Done';
-import CancelIcon from '@material-ui/icons/Clear';
 
 export default function CarpoolNote({
 	note,
@@ -32,7 +31,7 @@ export default function CarpoolNote({
 	}, [editText, setNote]);
 
 	return (
-		<div style={{ marginTop: '0.5rem', padding: '1rem' }}>
+		<div style={{ margin: '1rem 0rem', maxWidth: '100%' }}>
 			<b>Note</b>
 			<br />
 			<br />

src/components/Carpool/MemberList.tsx

@@ -41,7 +41,6 @@ export default function MemberList() {
 		[carpool]
 	);
 	const members = useSignups(carpool.event.id, memberIDs);
-	console.log(members);
 
 	const membersToShow = useMemo(
 		() => (expanded ? members : members.slice(0, shownMembersCount)),

src/components/Event/EventCarpoolCreateButton.tsx

@@ -29,6 +29,7 @@ export default function EventCarpoolCreateButton() {
 		try {
 			event.carpools.push({
 				id,
+				note: '',
 				name: me.name + "'s Carpool",
 				members: [{ id: me.id, name: me.name }],
 			});

src/components/Event/EventCarpools.tsx

@@ -91,7 +91,6 @@ function CarpoolRow({
 				marginBottom: '0.5rem',
 			}}
 		>
-			{/* <div> */}
 			<span
 				style={{ cursor: 'pointer' }}
 				onClick={() => {
@@ -100,9 +99,8 @@ function CarpoolRow({
 			>
 				<b>{carpool.name}</b>
 				{extraDistance !== null && ' +' + extraDistance.toFixed(1) + ' miles'}
+				{carpool.note && ' - ' + carpool.note}
 			</span>
-			<br />
-			<br />
 			{!inCarpoolAlready && (
 				<>
 					{inviteState === 'none' ? (
@@ -116,7 +114,7 @@ function CarpoolRow({
 							onClick={cancelButton}
 						/>
 					) : (
-						// inviteState === 'invited
+						// inviteState === invited
 						<CheckIcon style={{ fontSize: '2em', cursor: 'pointer' }} />
 					)}
 				</>

src/components/types.ts

@@ -76,6 +76,7 @@ export type IEvent = {
 	carpools: {
 		id: number;
 		name: string;
+		note: string;
 		members: {
 			id: number;
 			name: string;