Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a vertical alignment issue with the file-found badge in the Explorer view by applying a small upward translation. The fix addresses issue #235159 while being careful not to reintroduce regression #273052.
Key Changes:
- Applied a specific vertical translation to the count badge when displayed in collapsed folder rows in the Explorer view
📬 CODENOTIFYThe following users are being notified based on files changed in this PR: @bpaseroMatched files:
|
|
|
||
| .explorer-folders-view .monaco-list-row[aria-expanded="false"] .explorer-item.highlight-badge .monaco-count-badge { | ||
| display: inline-block; | ||
| transform: translateY(-1.5px); |
There was a problem hiding this comment.
can you explain the math behind this? How do you get to 1.5px?
There was a problem hiding this comment.
The original value was -2px because the .monaco-tl-contents element has a height of 22px and a line height of 22px.
However, since .monaco-count-badge has a line-height of 11px, it was slightly misaligned (0.5px too high), so I adjusted the value to -1.5px instead.
I think using flex would be the cleanest approach, but it might affect properties like text-overflow: ellipsis or other layout behavior, so I only moved this specific part.
|
|
||
| .explorer-folders-view .monaco-list-row[aria-expanded="false"] .explorer-item.highlight-badge .monaco-count-badge { | ||
| display: inline-block; | ||
| transform: translateY(-1.5px); |
There was a problem hiding this comment.
@benibenj using the .5 here is likely to cause blurriness on low DPI displays. I'm unsure whether the use of transform here will create a new render layer and the overhead associated with that.
|
In current release version of vscode, a very strange align mess-up occurs in all positions, like these: |
Fixed #235159
This caused a regression in #273052, so I've fixed the specific line to avoid side effects.
Fixes #235159
Addresses #273052
FIXED ScreenShot