UI Bug: Right edge clipping of italicized text in user autocompletion list · desktop/desktop#21819

(0 留言) (0 反應) (0 負責人)TypeScript (18,758 star) (9,945 fork)batch import

help wanted

描述

The problem

I noticed a minor UI/styling issue in the unknown user autocompletion list.

When the user nickname or description is rendered in an italicized font, the rightmost edge of the text gets visually clipped/cut off. This is a common CSS rendering issue with italic fonts where the slanted characters extend beyond their standard bounding box, lacking sufficient right padding or margin to be fully displayed.

While it is a small detail, fixing this will make the UI look much cleaner and more polished.

Release version

Version 3.5.6

Operating system

Windows 11

Steps to reproduce the behavior

Go to any repository in GitHub Desktop.
Click on the Co-Authors input field (or anywhere user autocompletion is triggered).
Type a character (e.g., @asd) to bring up the user autocompletion dropdown list.
Look closely at the list items where the nickname or description text is italicized.
Observe that the right edge of the last italicized character is visually clipped.

Log files

No response

Screenshots

No response

Additional context

I will submit a PR, so please review it.

貢獻者指南

技術棧: typescriptreactelectroncss
領域: desktopfrontend
議題類型: bug
難度: 2
預計時間: under 1 hour
活動狀態: fresh
清晰度: clear
前置要求: 無
新手友善度: 90
研究方向: Locate the CSS styles for the user autocompletion list component in the GitHub Desktop repository (likely under src/ui/). Check for padding and overflow properties on the list items or text elements. The issue is that italicized text is clipped at the right edge due to insufficient right padding. Add extra right padding or adjust the overflow to visible for that container. Test the fix by reproducing the issue with italicized text in the autocompletion dropdown.