add content validation and text wrap

client/src/components/home-page/Todo.tsx

@@ -17,12 +17,17 @@ export const TodoFragment = graphql`
   }
 `;
 
+// TODO: handle TodoNotFoundErrors
 const deleteTodoMutation = graphql`
   mutation TodoDeleteMutation($todoId: ID!, $connections: [ID!]!) {
     deleteTodo(todoId: $todoId) {
+      __typename
       ... on Todo {
         id @deleteEdge(connections: $connections)
       }
+      ... on TodoNotFoundError {
+        message
+      }
     }
   }
 `;
@@ -52,14 +57,16 @@ export default function Todo({ todo, connectionId }: Props) {
   return (
     <Card className="mb-4 group">
       <CardHeader>
-        <div className="flex justify-between">
-          <CardTitle className={clsx({ "line-through": data.completed })}>
-            {data.content}
-          </CardTitle>
-        </div>
+        <CardTitle
+          className={clsx({
+            "line-through": data.completed,
+          })}
+        >
+          <p className="break-all">{data.content}</p>
+        </CardTitle>
       </CardHeader>
       <CardFooter className="flex">
-        <p className="text-xs">
+        <p className="text-xs text-muted-foreground">
           created at {dtf.format(new Date(data.createdAt))}
         </p>
         <div className="flex gap-2 grow justify-end opacity-0 group-hover:opacity-100 transition-opacity">

client/src/components/home-page/TodoController.tsx

@@ -47,8 +47,8 @@ const TodoControllerCreateMutation = graphql`
 `;
 
 const createTodoSchema = z.object({
-  content: z.string().max(250, {
-    message: "content cannot be more than 250 characters.",
+  content: z.string().min(1, { message: "content is required" }).max(250, {
+    message: "content cannot be more than 250 characters",
   }),
 });
 
@@ -80,7 +80,7 @@ export default function TodoController({ rootQuery }: Props) {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="flex flex-col gap-8 w-full px-4"
+        className="flex flex-col gap-4 w-full px-4"
       >
         <FormField
           control={form.control}