fix: align plugin error badge with card icon

- anchor the error status badge to the plugin card icon wrapper
- keep the badge positioned at the icon's bottom-right corner
- add a layout regression test for plugin task items
This commit is contained in:
CodingOnStar
2026-03-17 16:43:23 +08:00
parent 37367c65c3
commit 111d82bbb4
2 changed files with 19 additions and 1 deletions

View File

@ -74,6 +74,24 @@ describe('PluginItem', () => {
expect(screen.getByTestId('status-icon')).toBeInTheDocument()
})
it('should anchor the status icon to the card icon wrapper', () => {
render(
<PluginItem
plugin={createPlugin()}
getIconUrl={mockGetIconUrl}
language="en_US"
statusIcon={<span data-testid="status-icon" />}
statusText="status"
/>,
)
const cardIcon = screen.getByTestId('card-icon')
const iconWrapper = cardIcon.parentElement
expect(iconWrapper).toHaveClass('relative', 'self-start')
expect(screen.getByTestId('status-icon').parentElement).toHaveClass('absolute', '-bottom-0.5', '-right-0.5')
})
it('should pass icon url to CardIcon', () => {
render(
<PluginItem

View File

@ -26,7 +26,7 @@ const PluginItem: FC<PluginItemProps> = ({
}) => {
return (
<div className="group/item flex gap-1 rounded-lg p-2 hover:bg-state-base-hover">
<div className="relative shrink-0">
<div className="relative shrink-0 self-start">
<CardIcon
size="small"
src={getIconUrl(plugin.icon)}