-
Improve validation modal text display and UX enhancements (#112)
发布于
2025-10-16 19:34:11 +00:00 | 1087 次提交 在此版本后已推送到 mainChanges Made:
1. Modal Text Display Improvements
- Increased error/warning message font size from 14px to 16px for better readability
- Improved line height from 1.5 to 1.6 for better spacing
- Increased margin-bottom from 4px to 8px for better visual separation
2. Code Preview Text Wrapping
- Removed horizontal scroll (
overflow-x: auto) from code previews - Added
white-space: normalto prevent excessive whitespace at line start - Added
word-wrap: break-wordandoverflow-wrap: break-wordfor proper text wrapping - Applied to all code preview sections:
- Error line text previews
- Warning line text previews
- Example line text in errors
- Example line text in warnings
3. Line Number Scroll Synchronization
- Added
position: relativeto.code-bodyfor better layout control - Added
overflow: hiddenandmax-height: 600pxto.code-line-numbers - Added
max-height: 600pxto.code-content - Implemented JavaScript scroll sync between line numbers and code content
- Line numbers now scroll perfectly in sync with code content
4. Clickable Error Line Numbers
- Added
cursor: pointerto error/warning line numbers - Added "Click to see details" tooltip on error/warning lines
- Implemented click event listeners on all error/warning lines
- Click handler searches through validators to find matching error
- Opens validation modal with correct validator details when clicked
- Added hover effects with
transform: translateX(-2px)andcursor: help
User Experience Improvements:
- ✅ Error messages are now larger and easier to read (16px)
- ✅ Code snippets wrap naturally without horizontal scroll
- ✅ No excessive whitespace at the beginning of code lines
- ✅ Line numbers stay synchronized during scroll
- ✅ Error line numbers are interactive and open detailed validation modals
- ✅ Better visual hierarchy with improved spacing and sizing
🤖 Generated with Claude Code
Co-authored-by: Claude noreply@anthropic.com
下载附件