发布

  • Improve validation modal text display and UX enhancements (#112)

    frostbyte_neo 发布于 2025-10-16 19:34:11 +00:00 | 1087 次提交 在此版本后已推送到 main

    Changes 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: normal to prevent excessive whitespace at line start
    • Added word-wrap: break-word and overflow-wrap: break-word for 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: relative to .code-body for better layout control
    • Added overflow: hidden and max-height: 600px to .code-line-numbers
    • Added max-height: 600px to .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: pointer to 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) and cursor: 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

    下载附件