fix: align highlight layer with textarea to fix misalignment issue #6649
Conversation
This file contains hidden or 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
- Match padding values between highlight layer and textarea - Use same padding logic for edit mode (pt-1.5 pb-10 px-2) and normal mode (py-1.5 px-2) - Add pr-9 to highlight layer to match textarea right padding - Fixes #6647
dosubot
bot
added
size:XS
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| "leading-vscode-editor-line-height", | ||
| "py-2", | ||
| "px-[9px]", | ||
| isEditMode ? "pt-1.5 pb-10 px-2" : "py-1.5 px-2", |
Contributor
Author
There was a problem hiding this comment.
Is this intentional? The padding values are duplicated between the highlight layer (lines 1014-1015) and the textarea (line 1062). Could we consider extracting these into constants or CSS variables to ensure they stay synchronized?
For example:
This would make future maintenance easier and prevent accidental desynchronization.
| "py-2", | ||
| "px-[9px]", | ||
| isEditMode ? "pt-1.5 pb-10 px-2" : "py-1.5 px-2", | ||
| "pr-9", |
Contributor
Author
There was a problem hiding this comment.
Nice fix! The alignment issue is resolved by matching the padding. Would it be worth adding a test to ensure these padding values remain synchronized in the future? This could help prevent regression of the alignment issue.
hannesrudolph
added
the
Issue/PR - Triage
Member
|
Fixed by #6648 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
This PR fixes the highlight layer misalignment issue reported in #6647. The highlight layer that shows highlighted mentions and commands was not properly aligned with the textarea content, causing visual misalignment.
Problem
The highlight layer and textarea had different padding values:
py-1.5 px-2(normal mode) orpt-1.5 pb-10 px-2(edit mode) pluspr-9py-2 px-[9px](fixed values)This mismatch caused the highlighted text to appear misaligned with the actual text in the textarea.
Solution
Updated the highlight layer to use the same padding values as the textarea:
pr-9to the highlight layer to match the textarea's right paddingChanges
ChatTextArea.tsxto synchronize padding between highlight layer and textareaTesting
Fixes #6647
Important
Fixes highlight layer misalignment with textarea in
ChatTextArea.tsxby synchronizing padding values.ChatTextArea.tsxby synchronizing padding values.pr-9padding to highlight layer to match textarea's right padding.This description was created by
for 79fd28c. You can customize this summary. It will automatically update as commits are pushed.