From 76d297fb36cb76f402a9b2bf61e25cf781acca1d Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 31 Jan 2026 07:16:30 +0000
Subject: [PATCH] Improve mobile layouts for recipients

Co-authored-by: me <me@kentcdodds.com>
---
 .../_app+/recipients+/$recipientId.index.tsx  | 26 +++++++++----------
 .../_app+/recipients+/$recipientId.past.tsx   | 12 +++++----
 app/routes/_app+/recipients+/$recipientId.tsx | 16 ++++++------
 app/routes/_app+/recipients+/index.tsx        | 10 ++++---
 4 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 91a83775..b7753600 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -307,10 +307,10 @@ export default function RecipientRoute() {
 					</Link>
 				</div>
 			) : null}
-			<ul className="flex flex-col gap-6">
+			<ul className="flex flex-col gap-4 sm:gap-6">
 				{data.futureMessages.length ? (
 					data.futureMessages.map((m, index) => (
-						<li key={m.id} className="flex flex-col gap-4">
+						<li key={m.id} className="flex flex-col gap-3 sm:gap-4">
 							<MessageForms message={m} index={index} />
 						</li>
 					))
@@ -344,7 +344,7 @@ export default function RecipientRoute() {
 						<StatusButton
 							status={isCreating ? 'pending' : 'idle'}
 							type="submit"
-							className="self-end bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))] sm:self-auto"
+							className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))] sm:w-auto"
 						>
 							<Icon name="check">Add to Queue</Icon>
 						</StatusButton>
@@ -391,27 +391,27 @@ function MessageForms({
 		: 'Message'
 
 	return (
-		<div className="flex flex-col gap-4 lg:flex-row">
+		<div className="flex flex-col gap-3 sm:gap-4 lg:flex-row lg:items-start">
 			<div className="flex gap-2 lg:flex-col">
 				<UpdateOrderForm message={message} direction="earlier" />
 				<UpdateOrderForm message={message} direction="later" />
 			</div>
 			<div className="flex-1 space-y-3">
 				<div
-					className={`rounded-[28px] px-6 py-5 text-[hsl(var(--palette-cream))] shadow-sm ${cardTone}`}
+					className={`rounded-[28px] px-4 py-4 text-[hsl(var(--palette-cream))] shadow-sm sm:px-6 sm:py-5 ${cardTone}`}
 				>
-					<div className="flex items-center justify-between gap-2 text-xs font-semibold tracking-[0.2em] text-[hsl(var(--palette-cream))] uppercase">
-						<div className="flex items-center gap-2">
+					<div className="flex flex-col gap-3 text-xs font-semibold tracking-[0.15em] text-[hsl(var(--palette-cream))] uppercase sm:flex-row sm:items-center sm:justify-between sm:tracking-[0.2em]">
+						<div className="flex flex-wrap items-center gap-2">
 							<Icon name={isPrimary ? 'check' : 'clock'} size="sm" />
 							<span>{headerText}</span>
 						</div>
-						<div className="flex items-center gap-2">
+						<div className="flex flex-wrap items-center gap-2 sm:flex-nowrap sm:justify-end">
 							<StatusButton
 								form={updateContentForm.id}
 								status={
 									updateContentFetcher.state !== 'idle' ? 'pending' : 'idle'
 								}
-								className="gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15]"
+								className="h-11 w-11 gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15] sm:h-10 sm:w-10"
 								size="icon"
 								variant="ghost"
 								type="submit"
@@ -491,7 +491,7 @@ function UpdateOrderForm({
 					variant="secondary"
 					size="icon"
 					status={fetcher.state !== 'idle' ? 'pending' : 'idle'}
-					className="text-muted-foreground hover:text-foreground gap-0"
+					className="h-11 w-11 gap-0 text-muted-foreground hover:text-foreground sm:h-10 sm:w-10"
 					type="submit"
 					name="intent"
 					value={updateMessageOrderActionIntent}
@@ -530,7 +530,7 @@ function SendNowForm({ message }: { message: Pick<FutureMessage, 'id'> }) {
 			<StatusButton
 				variant="ghost"
 				size="icon"
-				className="gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15]"
+				className="h-11 w-11 gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15] sm:h-10 sm:w-10"
 				status={fetcher.state !== 'idle' ? 'pending' : 'idle'}
 				type="submit"
 				name="intent"
@@ -558,8 +558,8 @@ function DeleteForm({ message }: { message: Pick<FutureMessage, 'id'> }) {
 	})
 	const dc = useDoubleCheck()
 	const deleteClassName = dc.doubleCheck
-		? 'gap-0 data-[safe-delay=true]:opacity-50'
-		: 'gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15] data-[safe-delay=true]:opacity-50'
+		? 'h-11 w-11 gap-0 data-[safe-delay=true]:opacity-50 sm:h-10 sm:w-10'
+		: 'h-11 w-11 gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15] data-[safe-delay=true]:opacity-50 sm:h-10 sm:w-10'
 
 	return (
 		<fetcher.Form method="POST" {...getFormProps(form)}>
diff --git a/app/routes/_app+/recipients+/$recipientId.past.tsx b/app/routes/_app+/recipients+/$recipientId.past.tsx
index cb24a65b..c8cc9f77 100644
--- a/app/routes/_app+/recipients+/$recipientId.past.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.past.tsx
@@ -119,7 +119,7 @@ function Pagination({
 	const hasNextPage = currentPage < totalPages
 
 	return (
-		<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
+		<div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between">
 			<p className="text-muted-foreground text-sm">
 				{totalMessages === 0
 					? 'No messages found'
@@ -196,7 +196,7 @@ export default function RecipientRoute() {
 				/>
 			</div>
 
-			<ul className={cn('flex flex-col gap-2', { 'opacity-50': isPending })}>
+			<ul className={cn('flex flex-col gap-3 sm:gap-4', { 'opacity-50': isPending })}>
 				{data.pastMessages.length === 0 ? (
 					<li className="text-muted-foreground py-8 text-center">
 						{data.searchQuery
@@ -207,12 +207,14 @@ export default function RecipientRoute() {
 					data.pastMessages.map((m) => (
 						<li
 							key={m.id}
-							className="flex flex-col justify-start gap-2 align-top lg:flex-row"
+							className="border-border bg-card flex flex-col justify-start gap-2 rounded-2xl border px-4 py-3 shadow-sm sm:px-5 sm:py-4 lg:flex-row lg:items-start"
 						>
-							<span className="text-muted-secondary-foreground min-w-36">
+							<span className="text-muted-secondary-foreground min-w-36 text-xs font-semibold tracking-[0.15em] uppercase sm:text-sm sm:tracking-[0.2em]">
 								{m.sentAtDisplay}
 							</span>
-							<span>{m.content}</span>
+							<span className="break-words text-sm sm:text-base">
+								{m.content}
+							</span>
 						</li>
 					))
 				)}
diff --git a/app/routes/_app+/recipients+/$recipientId.tsx b/app/routes/_app+/recipients+/$recipientId.tsx
index 42bd2e6d..a6db62d2 100644
--- a/app/routes/_app+/recipients+/$recipientId.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.tsx
@@ -94,7 +94,7 @@ export default function RecipientRoute() {
 	}, [currentPath])
 
 	return (
-		<div className="grid gap-10 lg:grid-cols-[320px_1fr]">
+		<div className="grid gap-8 lg:grid-cols-[320px_1fr] lg:gap-10">
 			<aside className="space-y-6">
 				<Link
 					to="/recipients"
@@ -105,7 +105,7 @@ export default function RecipientRoute() {
 				</Link>
 				<div className="flex flex-wrap items-start justify-between gap-4">
 					<div>
-						<h2 className="text-foreground text-3xl font-bold">
+						<h2 className="text-foreground text-2xl font-bold sm:text-3xl">
 							{data.recipient.name}
 						</h2>
 						<div className="text-muted-foreground mt-2 flex flex-wrap items-center gap-2 text-xs font-semibold tracking-[0.2em] uppercase">
@@ -160,13 +160,13 @@ export default function RecipientRoute() {
 					</SimpleTooltip>
 				</div>
 			</aside>
-			<section className="border-border bg-muted rounded-[32px] border px-6 py-8 shadow-sm">
-				<nav className="mb-6 flex flex-wrap gap-2">
+			<section className="border-border bg-muted min-w-0 rounded-[32px] border px-4 py-6 shadow-sm sm:px-6 sm:py-8">
+				<nav className="mb-6 grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
 					<Link
 						to="."
 						preventScrollReset
 						className={cn(
-							'border-border text-muted-foreground hover:bg-card hover:text-foreground flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold tracking-[0.2em] uppercase transition',
+							'border-border text-muted-foreground hover:bg-card hover:text-foreground flex w-full items-center justify-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold tracking-[0.15em] uppercase transition sm:w-auto sm:justify-start sm:tracking-[0.2em]',
 							currentPath === '.' && 'bg-card text-foreground shadow-sm',
 						)}
 						ref={firstLinkRef}
@@ -179,7 +179,7 @@ export default function RecipientRoute() {
 						to="new"
 						preventScrollReset
 						className={cn(
-							'border-border text-muted-foreground hover:bg-card hover:text-foreground flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold tracking-[0.2em] uppercase transition',
+							'border-border text-muted-foreground hover:bg-card hover:text-foreground flex w-full items-center justify-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold tracking-[0.15em] uppercase transition sm:w-auto sm:justify-start sm:tracking-[0.2em]',
 							currentPath === 'new' && 'bg-card text-foreground shadow-sm',
 						)}
 					>
@@ -191,7 +191,7 @@ export default function RecipientRoute() {
 						to="past"
 						preventScrollReset
 						className={cn(
-							'border-border text-muted-foreground hover:bg-card hover:text-foreground flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold tracking-[0.2em] uppercase transition',
+							'border-border text-muted-foreground hover:bg-card hover:text-foreground flex w-full items-center justify-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold tracking-[0.15em] uppercase transition sm:w-auto sm:justify-start sm:tracking-[0.2em]',
 							currentPath === 'past' && 'bg-card text-foreground shadow-sm',
 						)}
 					>
@@ -203,7 +203,7 @@ export default function RecipientRoute() {
 						to="edit"
 						preventScrollReset
 						className={cn(
-							'border-border text-muted-foreground hover:bg-card hover:text-foreground flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold tracking-[0.2em] uppercase transition',
+							'border-border text-muted-foreground hover:bg-card hover:text-foreground flex w-full items-center justify-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold tracking-[0.15em] uppercase transition sm:w-auto sm:justify-start sm:tracking-[0.2em]',
 							currentPath === 'edit' && 'bg-card text-foreground shadow-sm',
 						)}
 					>
diff --git a/app/routes/_app+/recipients+/index.tsx b/app/routes/_app+/recipients+/index.tsx
index c1cf71dc..7526389f 100644
--- a/app/routes/_app+/recipients+/index.tsx
+++ b/app/routes/_app+/recipients+/index.tsx
@@ -38,11 +38,13 @@ export default function RecipientsIndexRoute() {
 					<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
 						Recipients
 					</p>
-					<h1 className="text-foreground text-4xl font-bold">Recipients</h1>
+					<h1 className="text-foreground text-3xl font-bold sm:text-4xl">
+						Recipients
+					</h1>
 				</div>
 				<ButtonLink
 					to="new"
-					className="flex items-center gap-2 bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+					className="flex w-full items-center justify-center gap-2 bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))] sm:w-auto"
 				>
 					<Icon name="plus">Add New Recipient</Icon>
 				</ButtonLink>
@@ -69,7 +71,7 @@ export default function RecipientsIndexRoute() {
 							return (
 								<div
 									key={recipient.id}
-									className="grid gap-3 px-6 py-6 md:grid-cols-[minmax(160px,1.2fr)_minmax(180px,1.2fr)_minmax(220px,1.4fr)_minmax(140px,0.8fr)_120px] md:items-center md:gap-4 md:px-8"
+									className="grid gap-4 px-4 py-5 sm:px-6 sm:py-6 md:grid-cols-[minmax(160px,1.2fr)_minmax(180px,1.2fr)_minmax(220px,1.4fr)_minmax(140px,0.8fr)_120px] md:items-center md:gap-4 md:px-8"
 								>
 									<div className="flex flex-col gap-1">
 										<span className="text-muted-foreground text-xs font-semibold tracking-[0.2em] uppercase md:hidden">
@@ -133,7 +135,7 @@ export default function RecipientsIndexRoute() {
 						</div>
 						<ButtonLink
 							to="new"
-							className="flex items-center gap-2 bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+							className="flex w-full items-center justify-center gap-2 bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))] sm:w-auto"
 						>
 							<Icon name="plus">Add Recipient</Icon>
 						</ButtonLink>