fix(ui): allow line-breaks in card templates

Change template input fields from single-line <input> to <textarea>
elements to support multiline content in front/back templates.

Fixes #5

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

3 files changed, 18 insertions, 18 deletions

diff --git a/src/client/components/CreateNoteTypeModal.tsx b/src/client/components/CreateNoteTypeModal.tsx
index 2b8dfb9..6e43c96 100644
--- a/src/client/components/CreateNoteTypeModal.tsx
+++ b/src/client/components/CreateNoteTypeModal.tsx
@@ -147,15 +147,15 @@ export function CreateNoteTypeModal({
 							>
 								Front Template
 							</label>
-							<input
+							<textarea
 								id="front-template"
-								type="text"
 								value={frontTemplate}
 								onChange={(e) => setFrontTemplate(e.target.value)}
 								required
 								maxLength={1000}
 								disabled={isSubmitting}
-								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed"
+								rows={3}
+								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed resize-y"
 								placeholder="{{Front}}"
 							/>
 							<p className="text-muted text-xs mt-1">
@@ -170,15 +170,15 @@ export function CreateNoteTypeModal({
 							>
 								Back Template
 							</label>
-							<input
+							<textarea
 								id="back-template"
-								type="text"
 								value={backTemplate}
 								onChange={(e) => setBackTemplate(e.target.value)}
 								required
 								maxLength={1000}
 								disabled={isSubmitting}
-								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed"
+								rows={3}
+								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed resize-y"
 								placeholder="{{Back}}"
 							/>
 						</div>
diff --git a/src/client/components/EditNoteTypeModal.tsx b/src/client/components/EditNoteTypeModal.tsx
index b5d453d..014492e 100644
--- a/src/client/components/EditNoteTypeModal.tsx
+++ b/src/client/components/EditNoteTypeModal.tsx
@@ -160,15 +160,15 @@ export function EditNoteTypeModal({
 							>
 								Front Template
 							</label>
-							<input
+							<textarea
 								id="edit-front-template"
-								type="text"
 								value={frontTemplate}
 								onChange={(e) => setFrontTemplate(e.target.value)}
 								required
 								maxLength={1000}
 								disabled={isSubmitting}
-								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed"
+								rows={3}
+								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed resize-y"
 							/>
 							<p className="text-muted text-xs mt-1">
 								Use {"{{FieldName}}"} to insert field values
@@ -182,15 +182,15 @@ export function EditNoteTypeModal({
 							>
 								Back Template
 							</label>
-							<input
+							<textarea
 								id="edit-back-template"
-								type="text"
 								value={backTemplate}
 								onChange={(e) => setBackTemplate(e.target.value)}
 								required
 								maxLength={1000}
 								disabled={isSubmitting}
-								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed"
+								rows={3}
+								className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed resize-y"
 							/>
 						</div>
 
diff --git a/src/client/components/NoteTypeEditor.tsx b/src/client/components/NoteTypeEditor.tsx
index 33b9dba..01a4777 100644
--- a/src/client/components/NoteTypeEditor.tsx
+++ b/src/client/components/NoteTypeEditor.tsx
@@ -622,15 +622,15 @@ export function NoteTypeEditor({
 										>
 											Front Template
 										</label>
-										<input
+										<textarea
 											id="front-template"
-											type="text"
 											value={frontTemplate}
 											onChange={(e) => setFrontTemplate(e.target.value)}
 											required
 											maxLength={1000}
 											disabled={isSubmitting}
-											className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed"
+											rows={3}
+											className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed resize-y"
 										/>
 									</div>
 
@@ -641,15 +641,15 @@ export function NoteTypeEditor({
 										>
 											Back Template
 										</label>
-										<input
+										<textarea
 											id="back-template"
-											type="text"
 											value={backTemplate}
 											onChange={(e) => setBackTemplate(e.target.value)}
 											required
 											maxLength={1000}
 											disabled={isSubmitting}
-											className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed"
+											rows={3}
+											className="w-full px-4 py-2.5 bg-ivory border border-border rounded-lg text-slate placeholder-muted font-mono text-sm transition-all duration-200 hover:border-muted focus:border-primary focus:ring-2 focus:ring-primary/10 disabled:opacity-50 disabled:cursor-not-allowed resize-y"
 										/>
 									</div>
 								</div>