From 87e970bbeeb5000d7489b9c959cc1d204fc64743 Mon Sep 17 00:00:00 2001 From: tegwick Date: Sat, 25 Oct 2025 21:53:49 +0200 Subject: [PATCH] feat: implement intelligent auto-sizing textarea for optimal editing UX MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Enhanced the editing experience with smart textarea sizing that adapts to content dimensions: Smart Auto-Sizing Logic: - Dynamically calculates height based on content lines - Minimum height: 3 lines (63px) for comfortable editing - Maximum height: 20 lines (444px) to prevent excessive expansion - Precise calculation using line-height and padding measurements Responsive Behavior: - Auto-resizes on input events as you type - Handles paste operations with proper sizing - Smooth transitions with 0.15s ease animation - Temporarily disables transition during measurement for accuracy Technical Implementation: - Line-height aware calculation (14px font × 1.5 = 21px per line) - Proper padding compensation (24px total) - Scroll-height based measurement for precise content fitting - Debounced initial sizing to handle DOM rendering User Experience Benefits: - Textarea perfectly fits content size on open - No unnecessary white space for short content - Sufficient space for longer content without overwhelming - Natural, document-like editing experience - Visual harmony with surrounding content boxes CSS Enhancements: - Reduced min-height from 100px to 60px for better proportions - Added smooth height transitions for polished feel - Maintained vertical resize capability for user control - Proper box-sizing for consistent measurements This creates a much more natural editing experience where the textarea intelligently adapts to match the content being edited. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- markitect/document_manager.py | 39 ++++++++++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/markitect/document_manager.py b/markitect/document_manager.py index 4237b19a..57246bc1 100644 --- a/markitect/document_manager.py +++ b/markitect/document_manager.py @@ -630,7 +630,8 @@ class DocumentManager: .edit-mode textarea { width: 100%; - min-height: 100px; + min-height: 60px; + max-height: 400px; font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace; border: 2px solid #007acc; border-radius: 6px; @@ -638,6 +639,9 @@ class DocumentManager: font-size: 14px; line-height: 1.5; resize: vertical; + overflow-y: auto; + box-sizing: border-box; + transition: height 0.15s ease; } .edit-mode textarea:focus { @@ -737,6 +741,39 @@ class DocumentManager: textarea.value = this.htmlToMarkdown(originalContent); textarea.className = 'edit-mode'; + // Auto-sizing function + const autoResize = () => { + // Temporarily disable transition for accurate measurement + const transition = textarea.style.transition; + textarea.style.transition = 'none'; + + // Reset height to measure scrollHeight + textarea.style.height = 'auto'; + + // Calculate ideal height based on content + const padding = 24; // 12px top + 12px bottom + const lineHeight = 21; // 14px font-size * 1.5 line-height + const minLines = 3; // Minimum of 3 lines + const maxLines = 20; // Maximum of 20 lines + + const contentHeight = textarea.scrollHeight; + const minHeight = (lineHeight * minLines) + padding; + const maxHeight = (lineHeight * maxLines) + padding; + + const newHeight = Math.max(minHeight, Math.min(maxHeight, contentHeight)); + textarea.style.height = newHeight + 'px'; + + // Re-enable transition + textarea.style.transition = transition; + }; + + // Auto-resize on input and paste + textarea.addEventListener('input', autoResize); + textarea.addEventListener('paste', () => setTimeout(autoResize, 10)); + + // Initial sizing after DOM update + setTimeout(autoResize, 20); + textarea.addEventListener('blur', () => { this.hasEdits = true; // Mark that edits have been made