From 0868f941f6f288b63e62932f1552018bf1435799 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 9 Feb 2026 11:30:14 +0800
Subject: [PATCH] chore: item hover padding

---
 .../skill-editor/plugins/file-picker-panel.tsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
index dc890748be..c57dbb02bf 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
@@ -52,7 +52,7 @@ const FilePickerTreeNode = ({ node, style, dragHandle, onSelectNode }: FilePicke
       aria-selected={isSelected}
       aria-expanded={isFolder ? node.isOpen : undefined}
       className={cn(
-        'group relative flex h-6 cursor-pointer items-center gap-px overflow-hidden rounded-md',
+        'group relative flex h-6 cursor-pointer items-center gap-0 overflow-hidden rounded-md',
         'hover:bg-state-base-hover',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-components-input-border-active',
         isSelected && 'bg-state-base-active',
@@ -82,6 +82,12 @@ const FilePickerTreeNode = ({ node, style, dragHandle, onSelectNode }: FilePicke
           {node.data.name}
         </span>
       </div>
+      {isFolder && (
+        <span
+          aria-hidden="true"
+          className="h-full w-px shrink-0 bg-transparent group-hover:bg-components-panel-bg"
+        />
+      )}
       {isFolder && (
         <button
           type="button"
@@ -89,8 +95,10 @@ const FilePickerTreeNode = ({ node, style, dragHandle, onSelectNode }: FilePicke
           onClick={handleToggle}
           aria-label={t('skillSidebar.toggleFolder')}
           className={cn(
-            'flex size-6 shrink-0 items-center justify-center rounded-md',
-            'text-text-tertiary hover:bg-state-base-hover-alt',
+            'flex size-6 shrink-0 items-center justify-center rounded-r-md',
+            'bg-transparent text-text-tertiary',
+            'group-hover:bg-state-base-hover-subtle',
+            'hover:bg-state-base-hover-subtle',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-components-input-border-active',
           )}
         >