From 30156ebd60ef9319986e89a26bdfc20a4be52412 Mon Sep 17 00:00:00 2001
From: Daniel Volz <mail@danielvolz.org>
Date: Sun, 28 Dec 2025 13:51:57 +0100
Subject: [PATCH] feat(ui): increase notes character limit to 2000 and add
 auto-resize functionality for textareas

---
 backend/src/routes/medications.ts |  2 +-
 frontend/src/App.tsx              | 14 +++++++++--
 frontend/src/styles.css           | 42 +++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/backend/src/routes/medications.ts b/backend/src/routes/medications.ts
index ef31f4c..2af7a5c 100644
--- a/backend/src/routes/medications.ts
+++ b/backend/src/routes/medications.ts
@@ -28,7 +28,7 @@ const medicationSchema = z.object({
   looseTablets: z.number().int().min(0).default(0),
   pillWeightMg: z.number().int().min(1).nullable().optional(),
   expiryDate: z.string().nullable().optional(),
-  notes: z.string().max(500).nullable().optional(),
+  notes: z.string().max(2000).nullable().optional(),
   intakeRemindersEnabled: z.boolean().default(false),
   blisters: z.array(blisterSchema).min(1).max(12),
 });
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 21f119c..3bb5be4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1482,7 +1482,9 @@ function AppContent() {
 										onChange={(e) => handleValueChange("notes", e.target.value)} 
 										placeholder={t('form.placeholders.notes')}
 										rows={2}
-										maxLength={500}
+										maxLength={2000}
+										className="auto-resize"
+										onInput={(e) => { const t = e.target as HTMLTextAreaElement; t.style.height = 'auto'; t.style.height = t.scrollHeight + 'px'; }}
 									/>
 								</label>
 
@@ -2450,7 +2452,15 @@ function AppContent() {
 							</label>
 							<label className="full">
 								{t('form.notes')}
-								<textarea value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} placeholder={t('form.placeholders.notes')} rows={2} />
+								<textarea 
+									value={form.notes} 
+									onChange={(e) => setForm({ ...form, notes: e.target.value })} 
+									placeholder={t('form.placeholders.notes')} 
+									rows={2} 
+									maxLength={2000}
+									className="auto-resize"
+									onInput={(e) => { const t = e.target as HTMLTextAreaElement; t.style.height = 'auto'; t.style.height = t.scrollHeight + 'px'; }}
+								/>
 							</label>
 
 							{editingId && (() => {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 13869b3..5d6cf5b 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -488,6 +488,23 @@ textarea {
   min-height: 60px;
 }
 
+/* Auto-resize textarea */
+textarea.auto-resize {
+  resize: none;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  min-height: 100px;
+  max-height: 400px;
+}
+
+/* Mobile textarea improvements */
+@media (max-width: 600px) {
+  textarea.auto-resize {
+    min-height: 120px;
+    font-size: 16px; /* Prevents iOS zoom on focus */
+  }
+}
+
 .static-value {
   padding: 0.7rem 0.85rem;
   border-radius: var(--btn-radius);
@@ -2391,6 +2408,31 @@ textarea {
   border-bottom: none;
 }
 
+/* Notes content in modal - auto-sizing box */
+.med-notes-content {
+  background: var(--bg-secondary);
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  line-height: 1.6;
+  max-height: 300px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+  font-size: 1rem;
+}
+
+/* Mobile: larger notes box with better touch scrolling */
+@media (max-width: 600px) {
+  .med-notes-content {
+    min-height: 80px;
+    max-height: 200px;
+    font-size: 1rem;
+    padding: 1rem;
+    touch-action: pan-y; /* Enable vertical touch scrolling */
+  }
+}
+
 .med-detail-section h3 {
   font-size: 0.85rem;
   text-transform: uppercase;