more cleanup

Author: kentcdodds

exercises/99.final/01.solution.final/src/data.json

@@ -9,7 +9,7 @@
 			"messages": [
 				{
 					"id": "1",
-					"text": "Thank you for being my partner in every adventure and my comfort in every storm. I love you more than you know.",
+					"text": "Thank you for being my partner in every adventure and my comfort in every storm.\n\nI love you more than you know.",
 					"sentAt": "2044-06-06T10:00:00Z",
 					"status": "sent"
 				},

exercises/99.final/01.solution.final/src/routes/app/recipients/$id.tsx

@@ -104,7 +104,7 @@ export function RecipientRoute() {
 								</Button>
 							</div>
 							{/* break-words does not work for long strings of unbroken text */}
-							<p className="text-sm [word-break:break-word] md:text-base">
+							<p className="text-sm [word-break:break-word] whitespace-pre-line md:text-base">
 								{message.text}
 							</p>
 						</div>

exercises/99.final/01.solution.final/src/routes/app/recipients/layout.tsx

@@ -1,11 +1,12 @@
+import clsx from 'clsx'
 import { NavLink, Outlet } from 'react-router'
 import { ButtonLink } from '#src/components/button.tsx'
 import { Icon } from '#src/components/icon.tsx'
 import { recipients } from '#src/data.json'
 
 export function RecipientsLayout() {
 	return (
-		<div className="container mx-auto flex min-h-0 flex-grow flex-col p-4 md:p-8">
+		<div className="container mx-auto flex min-h-0 flex-grow flex-col px-4 pt-4 md:px-8 md:pt-8">
 			<div className="mb-8 flex items-center justify-between">
 				<h1 className="text-4xl font-bold">Recipients</h1>
 				<ButtonLink
@@ -20,23 +21,24 @@ export function RecipientsLayout() {
 			</div>
 
 			<div className="bg-background-alt flex min-h-0 flex-1 flex-col md:flex-row">
-				<div className="flex max-h-32 min-h-32 flex-col gap-4 overflow-auto border-b-2 px-8 py-4 md:max-h-none md:min-w-32 md:border-r md:border-b-0">
+				<div className="flex max-h-32 min-h-32 flex-col gap-4 overflow-auto border-b-2 py-4 pr-4 pl-1 md:max-h-none md:min-w-32 md:border-r md:border-b-0">
 					{recipients.map((recipient) => (
 						<NavLink
 							key={recipient.id}
 							to={`/recipients/${recipient.id}`}
 							className={({ isActive }) =>
-								isActive
-									? 'flex items-center gap-2 text-xl underline'
-									: 'text-xl'
+								clsx('text-xl', isActive ? 'underline' : '')
 							}
 						>
 							{({ isActive }) => (
-								<div className="flex items-center gap-2">
+								<div className="flex items-center gap-1">
 									<Icon
 										name="ArrowRight"
 										size="sm"
-										className={isActive ? 'opacity-100' : 'opacity-0'}
+										className={clsx(
+											isActive ? 'opacity-100' : 'opacity-0',
+											'transition-opacity',
+										)}
 									/>
 									{recipient.name}
 								</div>