Remove padding in v-highlight to fix display issues
#19740
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 422917a The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
paescuj
changed the title
v-highlight to fix various display issuesv-highlight to fix display issues
paescuj
requested review from
a team,
rijkvanzanten,
br41nslug and
DanielBiegler
and removed request for
a team
DanielBiegler
approved these changes
Sep 20, 2023
br41nslug
approved these changes
Sep 20, 2023
br-rafaelbarros
pushed a commit
to personal-forks/directus-source
that referenced
this pull request
Nov 7, 2023
* Remove padding in v-highlight to fix various display issues * Add changeset
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Before
Before #19451
In #19451 an attempt was made to prevent the highlight background from being cut off (see left side):
After #19451
However, this led to an even stronger jump effect:
Although this jump effect could be prevented by always rendering text with
v-highlighteven if no search is applied (which feels like an unsafe requirement), there was still the problem that narrow letters are overlapped and the letters themselves are jumpy.After
I've tried various approaches (absolute background behind the letter, ...), but the only one that works reliably is to leave out the padding of the background completely:
A small disadvantage is that the highlighting is a bit less visible now. On the other hand, it makes it clearer which part is actually highlighted - before that fix it was sometimes not obvious (for example here one could think that the "l" is also marked):