fix: use mat-label and bg-surface-container in TodoForm

- Restore mat-label inside mat-form-field for proper validation display
- Wrap form in rounded-2xl bg-surface-container card to match other pages
- Keep subscriptSizing=dynamic and sm:flex-row layout

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: chrisjwalk-bot

libs/todo/src/lib/components/todo-form/todo-form.ts

@@ -5,7 +5,7 @@ import {
   FormGroup,
   Validators,
 } from '@angular/forms';
-import { MatFormField, MatError } from '@angular/material/form-field';
+import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
@@ -17,68 +17,56 @@ import { CreateTodoRequest } from '../../models/todo';
   imports: [
     ReactiveFormsModule,
     MatFormField,
+    MatLabel,
     MatError,
     MatInput,
     MatButton,
     MatIcon,
   ],
   template: `
     <form
-      class="flex flex-col gap-4 sm:flex-row sm:items-end"
+      class="flex flex-col gap-4 rounded-2xl bg-surface-container p-4 sm:flex-row sm:items-start"
       [formGroup]="form"
       (ngSubmit)="submit()"
     >
-      <div class="flex flex-1 flex-col gap-4 sm:flex-row sm:items-end">
-        <div class="flex flex-1 flex-col gap-1.5">
-          <label
-            class="text-xs font-semibold text-on-surface-variant"
-            for="todo-title"
-          >
-            Title
-          </label>
-          <mat-form-field
-            appearance="outline"
-            subscriptSizing="dynamic"
-            class="w-full"
-          >
-            <input
-              matInput
-              id="todo-title"
-              formControlName="title"
-              placeholder="What needs to be done?"
-              autocomplete="off"
-            />
-            @if (
-              form.controls.title.hasError('required') &&
-              form.controls.title.touched
-            ) {
-              <mat-error>Title is required</mat-error>
-            }
-          </mat-form-field>
-        </div>
-        <div class="flex flex-1 flex-col gap-1.5">
-          <label
-            class="text-xs font-semibold text-on-surface-variant"
-            for="todo-description"
-          >
-            Description
-          </label>
-          <mat-form-field
-            appearance="outline"
-            subscriptSizing="dynamic"
-            class="w-full"
-          >
-            <input
-              matInput
-              id="todo-description"
-              formControlName="description"
-              placeholder="Optional details…"
-              autocomplete="off"
-            />
-          </mat-form-field>
-        </div>
-      </div>
-      <button mat-flat-button type="submit" [disabled]="form.invalid">
+      <mat-form-field
+        appearance="outline"
+        subscriptSizing="dynamic"
+        class="flex-1"
+      >
+        <mat-label>Title</mat-label>
+        <input
+          matInput
+          formControlName="title"
+          placeholder="What needs to be done?"
+          autocomplete="off"
+        />
+        @if (
+          form.controls.title.hasError('required') &&
+          form.controls.title.touched
+        ) {
+          <mat-error>Title is required</mat-error>
+        }
+      </mat-form-field>
+      <mat-form-field
+        appearance="outline"
+        subscriptSizing="dynamic"
+        class="flex-1"
+      >
+        <mat-label>Description</mat-label>
+        <input
+          matInput
+          formControlName="description"
+          placeholder="Optional details…"
+          autocomplete="off"
+        />
+      </mat-form-field>
+      <button
+        mat-flat-button
+        type="submit"
+        class="h-14 shrink-0"
+        [disabled]="form.invalid"
+      >
         <mat-icon>add</mat-icon>
         Add
       </button>