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 <noreply@anthropic.com>
tegwick
87e970bbee