Gutter: Icons are not aligned properly with the line numbers on soft-wrapped long lines

[oykuyilmaz]

Describe the bug

With lines long enough to trigger Ace’s (>10000 chars), gutter diagnostics icons in wrapped lines render in incorrect positions.

Expected Behavior

Icons to be horizontally aligned with the line number.

Current Behavior

The icons are centered vertically within the line height.

Reproduction Steps

1. Open JavaScript document in https://ace.c9.io/kitchen-sink.html with linters enabled
2. Paste a very long line, scroll to right and click onto <click to see more...>

[marinsokol5]

Hey, thanks for the submission! 🤗

Can you elaborate more on the expected behaviour, do you expect the icon to be fully vertically aligned to be underneath the line number?

Because from UI point of view, that does not scale. The icon is supposed to be fully on the left and then centered across the lines, same as when there is an error in 1 line:

[oykuyilmaz]

Hey, sure, I meant horizontal alignment of the two. I would expect them to behave similar (either they both stay at the top of this vertical space or they both are centered).

[marinsokol5]

Thanks for the clarification 😊 .

Hmm, definitely moving both of them (diagnostic icon and line number) to center is not a good option as it would not be possible to know where the line starts, so keeping a line number where the line starts is the way to go.
And then it's about showing the diagnostic icon either:

• centering it to the wrapped line (what we currently do)
• always directly before the line number (what you propose)

I don't have a super strong opinion on this to be honest, but I can understand the confusion, especially with really long lines as one would have to scroll to the middle to find the icon 👍🏻.

[nightwing]

This does not happen with new svg icons, are we planning to remove old implementation and keep only svg icons, or should we keep maintaining both?

[github-actions]

This issue has not received any attention in 1 year. If you want to keep this issue open, please leave a comment below and auto-close will be canceled.

[nlujjawal]

This issue will be resolved as part of this PR