Fix editor shadow appearing under the selected line background when horizontal scroll is active #5020
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue description
Now, when horizontal scroll is active (triggered by line length exceeding editor width), editor displays shadow on the left side of it. It is an
inset
shadow, which means it is displayed below the content (see box-shadow docs for details). This shadow is overlapped by active line background colour. On the default theme it's not visible, because it has background colour, which is almost transparent (with 0.07 alpha channel value). If you try it on a theme with rgb background color without alpha channel likeClouds
, issue becomes visible (see screenshots below).Fix description
The issue is fixed by moving the shadow to the
:after
pseudo-element, which comes as a last child of the container. It is rendered above all other children, which leads to shadow appearing correctly above the active line.Before
After
This PR also updates README with a path to correct
tests.html
location.By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.