responsive two-column layout

src/components/ActiveCarpools/ActiveCarpools.tsx

@@ -1,17 +1,15 @@
-import { useEffect } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getActiveCarpools } from '../api';
 import { ICarpool } from '../types';
+import UILink from '../UI/UILink';
 import UISecondaryBox from '../UI/UISecondaryBox';
-import UISecondaryHeader from '../UI/UISecondaryHeader';
 
 function ActiveCarpoolListItem({ carpool }: { carpool: ICarpool }) {
 	return (
-		<UISecondaryBox>
-			<UISecondaryHeader>
-				<a href={'/carpools/' + carpool.id}>{carpool.name}</a>
-			</UISecondaryHeader>
-		</UISecondaryBox>
+		<div>
+			<h2>{carpool.name}</h2>
+			<UILink href={`/carpools/${carpool.id}`}>View carpool</UILink>
+		</div>
 	);
 }
 
@@ -23,13 +21,18 @@ export default function ActiveCarpools() {
 	}, []);
 
 	return (
-		<>
-			<h1>Carpools</h1>
-			<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<h1 style={{ textAlign: 'center' }}>Carpools</h1>
+			<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
 				{activeCarpools.map((carpool) => (
 					<ActiveCarpoolListItem carpool={carpool} key={carpool.id} />
 				))}
-			</div>
-		</>
+			</UISecondaryBox>
+		</div>
 	);
 }

src/components/ActiveEvents/Events.tsx

@@ -16,9 +16,9 @@ export default function ActiveEvents() {
 	}, [hasEvents, setEvents]);
 
 	return (
-		<>
-			<h1>Events</h1>
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
+			<h1 style={{ textAlign: 'center' }}>Events</h1>
 			<EventStream events={events} />
-		</>
+		</div>
 	);
 }

src/components/App.tsx

@@ -20,7 +20,7 @@ const style: CSSProperties = {
 	display: 'flex',
 	flexDirection: 'column',
 	alignItems: 'center',
-	width: '30rem',
+	// width: '30rem',
 	maxWidth: '100%',
 	marginLeft: 'auto',
 	marginRight: 'auto',

src/components/Event/Event.tsx

@@ -53,7 +53,7 @@ export default function Event({
 				tentativeInvites,
 			}}
 		>
-			<UISecondaryBox>
+			<UISecondaryBox style={{}}>
 				<div style={{ textAlign: 'center' }}>
 					<UISecondaryHeader>{name}</UISecondaryHeader>
 					{group && <GroupName group={group} />}

src/components/EventStream.tsx

@@ -3,7 +3,13 @@ import { IEvent } from './types';
 
 export default function EventStream({ events }: { events: IEvent[] }) {
 	return (
-		<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+			}}
+		>
 			{events.map((event) => (
 				<Event id={event.id} initial={event} key={event.name} />
 			))}

src/components/GroupJoinerLink.tsx

@@ -70,7 +70,7 @@ export default function GroupJoinerLink() {
 	const [open, toggle] = useToggle(false);
 
 	return (
-		<>
+		<div style={{ width: '100%', textAlign: 'center' }}>
 			<UIPressable onClick={toggle}>Join Group</UIPressable>
 			{open && (
 				<>
@@ -78,6 +78,6 @@ export default function GroupJoinerLink() {
 					<GroupJoiner />
 				</>
 			)}
-		</>
+		</div>
 	);
 }

src/components/Groups/GroupList.tsx

@@ -4,19 +4,8 @@ import UISecondaryBox from '../UI/UISecondaryBox';
 
 function GroupListItem({ group }: { group: IGroup }) {
 	return (
-		<div style={{ display: 'flex', alignItems: 'center' }}>
-			<span
-				style={{
-					fontSize: '1.5rem',
-					fontWeight: 'bold',
-					display: 'block',
-					marginTop: '1rem',
-					marginBottom: '1rem',
-					marginRight: '2rem',
-				}}
-			>
-				{group.name}
-			</span>
+		<div>
+			<h2>{group.name}</h2>
 			<UILink href={`/groups/${group.id}`}>View group</UILink>
 		</div>
 	);
@@ -24,13 +13,7 @@ function GroupListItem({ group }: { group: IGroup }) {
 
 export default function GroupList({ groups }: { groups: IGroup[] }) {
 	return (
-		<UISecondaryBox
-			style={{
-				width: '100%',
-				boxSizing: 'border-box',
-				alignItems: 'center',
-			}}
-		>
+		<UISecondaryBox style={{ width: '100%' }}>
 			{groups.map((group) => (
 				<GroupListItem group={group} key={group.id} />
 			))}

src/components/Groups/Groups.tsx

@@ -13,8 +13,13 @@ export default function Groups() {
 	}, []);
 
 	return (
-		<>
-			<h1>Groups</h1>
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<h1 style={{ textAlign: 'center' }}>Groups</h1>
 			<GroupJoinerLink />
 			<br />
 			<GroupCreatorLink />
@@ -28,6 +33,6 @@ export default function Groups() {
 					an invite link.
 				</span>
 			)}
-		</>
+		</div>
 	);
 }

src/components/UI/UISecondaryBox.tsx

@@ -7,6 +7,7 @@ const baseStyle: CSSProperties = {
 	borderRadius: '0.5rem',
 	padding: '1rem',
 	marginBottom: '1em',
+	boxSizing: 'border-box',
 };
 
 export default function UISecondaryBox({

src/components/WheelShare.tsx

@@ -5,9 +5,38 @@ import Groups from './Groups/Groups';
 export default function WheelShare() {
 	return (
 		<>
-			<Groups />
-			<ActiveCarpools />
-			<ActiveEvents />
+			<div
+				style={{
+					display: 'flex',
+					width: '60rem',
+					maxWidth: '100vw',
+					flexWrap: 'wrap',
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						flex: 1,
+						padding: '1rem',
+						minWidth: '20rem',
+					}}
+				>
+					<ActiveCarpools />
+					<Groups />
+				</div>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						flex: 1,
+						padding: '1rem',
+						minWidth: '20rem',
+					}}
+				>
+					<ActiveEvents />
+				</div>
+			</div>
 		</>
 	);
 }