fix: update TodoForm styling to match app form conventions

- External labels (text-xs font-semibold text-on-surface-variant)
- subscriptSizing=dynamic to remove dead space below inputs
- Aligned button to bottom of fields on sm+ screens
- Remove MatLabel import (no longer needed)

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, MatLabel, MatError } from '@angular/material/form-field';
+import { MatFormField, 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,49 +17,71 @@ import { CreateTodoRequest } from '../../models/todo';
   imports: [
     ReactiveFormsModule,
     MatFormField,
-    MatLabel,
     MatError,
     MatInput,
     MatButton,
     MatIcon,
   ],
   template: `
-    <form class="flex flex-col gap-3" [formGroup]="form" (ngSubmit)="submit()">
-      <div class="flex flex-col gap-3 sm:flex-row sm:items-start">
-        <mat-form-field appearance="outline" 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" 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>
+    <form
+      class="flex flex-col gap-4 sm:flex-row sm:items-end"
+      [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-icon>add</mat-icon>
+        Add
+      </button>
     </form>
   `,
   host: {