tegwick 87e970bbee feat: implement intelligent auto-sizing textarea for optimal editing UX ...

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>

2025-10-25 21:53:49 +02:00

58 KiB

Raw Blame History

View Raw