From 111d82bbb474714c8b0cefc3944c6e0dca81459a Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.com>
Date: Tue, 17 Mar 2026 16:43:23 +0800
Subject: [PATCH] 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
---
 .../components/__tests__/plugin-item.spec.tsx  | 18 ++++++++++++++++++
 .../plugin-tasks/components/plugin-item.tsx    |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/__tests__/plugin-item.spec.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/__tests__/plugin-item.spec.tsx
index d4886b9610..772e246e22 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/__tests__/plugin-item.spec.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/__tests__/plugin-item.spec.tsx
@@ -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
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
index 9e8d6df230..2b88336522 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-item.tsx
@@ -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)}