Fix incorrect overflow

components/TodoList.tsx

@@ -9,18 +9,19 @@ export function TodoList(
 	{ user: { avatarUrl, assignedTodos, name, color } }: Props,
 ) {
 	const todoItem = (
-		{ classList, description }: Pick<Todo, 'description'> & {
+		{ className, description, hideDone }: Pick<Todo, 'description'> & {
-			classList?: string
+			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>

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>