From 324469259d4c5916684961cbee021c2899e3b054 Mon Sep 17 00:00:00 2001
From: Daniel Flanagan <daniel@lyte.dev>
Date: Sun, 7 Jan 2024 16:42:03 -0600
Subject: [PATCH] Fix incorrect overflow

---
 components/TodoList.tsx | 15 ++++++++++-----
 routes/index.tsx        |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/TodoList.tsx b/components/TodoList.tsx
index 4cd1b62..aa90620 100644
--- a/components/TodoList.tsx
+++ b/components/TodoList.tsx
@@ -9,18 +9,19 @@ export function TodoList(
 	{ user: { avatarUrl, assignedTodos, name, color } }: Props,
 ) {
 	const todoItem = (
-		{ classList, description }: Pick<Todo, 'description'> & {
-			classList?: string
+		{ className, description, hideDone }: Pick<Todo, 'description'> & {
+			className?: string
+			hideDone?: boolean
 		},
 	) => (
 		<li
 			style={`border-color: #${color}`}
 			class={`${
-				classList || ''
+				className || ''
 			} border-l-4 p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
 		>
 			<span class='text-xl'>{description}</span>
-			<Button class='mt-2'>Done</Button>
+			{hideDone ? '' : <Button class='mt-2'>Done</Button>}
 		</li>
 	)
 	return (
@@ -38,7 +39,11 @@ export function TodoList(
 			</button>
 			<ul class='flex flex-col gap-y-4'>
 				{assignedTodos.length < 1
-					? todoItem({ description: 'All clear! 🎉', classList: 'text-center' })
+					? todoItem({
+						description: 'All clear! 🎉',
+						className: 'text-center',
+						hideDone: true,
+					})
 					: assignedTodos.map(todoItem)}
 			</ul>
 		</div>
diff --git a/routes/index.tsx b/routes/index.tsx
index 452c851..4d4857e 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -37,7 +37,7 @@ export default function Home(
 			<h1 class='p-5 border-b-2 border-stone-500/20 text-2xl'>
 				Todos
 			</h1>
-			<ul class='p-4 relative flex'>
+			<ul class='p-4 relative flex overflow-x-scroll max-w-screen'>
 				<li>
 					<TodoList user={unassignedUser} />
 				</li>