fix(UI): avatars problem & button style#1277
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes avatar display issues for assignees and corrects button alignment problems in issue-related components. The changes refactor how assignee avatars are displayed by creating a new component for handling multiple avatars with hover cards and improving the styling of comment-related buttons.
- Refactored assignee avatar display logic into a dedicated
MemberHoverAvatarListcomponent - Fixed button alignment issues by adjusting margin styles in issue detail pages
- Cleaned up hover card component by removing unnecessary wrapper elements and hardcoded placeholder text
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| MemberHoverCardNE.tsx | Simplified hover card trigger structure and updated placeholder content with dynamic data |
| MemberHoverAvatarList.tsx | New component for displaying multiple assignee avatars with hover functionality |
| IssuesContent.tsx | Replaced individual avatar logic with new avatar list component and improved container styling |
| IssueDetailPage.tsx | Fixed button positioning by adding explicit margin styles |
| <> | ||
| <MemberHovercard username={hoverProps.username} side='top' align='end' member={hoverProps.userData}> | ||
| <div className={className} style={style}> | ||
| <Avatar src={src} /> |
There was a problem hiding this comment.
The Avatar component should include an alt attribute for accessibility. Consider adding alt text based on the user's username or display name.
| <Avatar src={src} /> | |
| <Avatar src={src} alt={`Avatar of ${hoverProps.username}`} /> |
| style={{ | ||
| marginTop: `16px` | ||
| }} |
There was a problem hiding this comment.
Using inline styles with hardcoded values when you already have the equivalent Tailwind class 'mt-4' (which is 16px) creates redundancy. Consider removing either the inline style or the Tailwind class.
| style={{ | |
| marginTop: `16px` | |
| }} |
修复assignees头像显示问题
修复增加assigness相关评论按钮错位问题