From 7224cf82c31e39cf399d6c38c68e4137f0b0791c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 4 Jul 2025 18:43:25 +0800
Subject: [PATCH] chore: fix scrollbar

---
 .../workflow/block-selector/index-bar.tsx     |  5 +-
 .../tool/tool-list-flat-view/list.tsx         | 50 ++++++++++---------
 .../workflow/block-selector/tool/tool.tsx     |  4 +-
 .../workflow/block-selector/tools.tsx         |  4 +-
 4 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/web/app/components/workflow/block-selector/index-bar.tsx b/web/app/components/workflow/block-selector/index-bar.tsx
index 0833ea1707..097a16eb94 100644
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -74,17 +74,16 @@ type IndexBarProps = {
   letters: string[]
   itemRefs: RefObject<{ [key: string]: HTMLElement | null }>
   className?: string
-  hasScrollBar: boolean
 }
 
-const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className, hasScrollBar }) => {
+const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
   const handleIndexClick = (letter: string) => {
     const element = itemRefs.current?.[letter]
     if (element)
       element.scrollIntoView({ behavior: 'smooth' })
   }
   return (
-    <div className={classNames('index-bar absolute right-0 top-36 flex flex-col items-center w-6 justify-center text-xs font-medium text-text-quaternary', hasScrollBar && 'right-3', className)}>
+    <div className={classNames('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
       <div className={classNames('absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
       {letters.map(letter => (
         <div className="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>
diff --git a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
index ed68339bc0..ca462c082e 100644
--- a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
@@ -11,6 +11,7 @@ import { useMemo } from 'react'
 type Props = {
   payload: ToolWithProvider[]
   isShowLetterIndex: boolean
+  indexBar: React.ReactNode
   hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   canNotSelectMultiple?: boolean
@@ -25,6 +26,7 @@ const ToolViewFlatView: FC<Props> = ({
   letters,
   payload,
   isShowLetterIndex,
+  indexBar,
   hasSearchText,
   onSelect,
   canNotSelectMultiple,
@@ -43,29 +45,31 @@ const ToolViewFlatView: FC<Props> = ({
     return res
   }, [payload, letters])
   return (
-    <div>
-      {payload.map(tool => (
-        <div
-          key={tool.id}
-          ref={(el) => {
-            const letter = firstLetterToolIds[tool.id]
-            if (letter)
-              toolRefs.current[letter] = el
-          }}
-        >
-          <Tool
-            payload={tool}
-            viewType={ViewType.flat}
-            isShowLetterIndex={isShowLetterIndex}
-            hasSearchText={hasSearchText}
-            onSelect={onSelect}
-            canNotSelectMultiple={canNotSelectMultiple}
-            onSelectMultiple={onSelectMultiple}
-            selectedTools={selectedTools}
-            canChooseMCPTool={canChooseMCPTool}
-          />
-        </div>
-      ))}
+    <div className='flex w-full'>
+      <div className='mr-1 grow'>
+        {payload.map(tool => (
+          <div
+            key={tool.id}
+            ref={(el) => {
+              const letter = firstLetterToolIds[tool.id]
+              if (letter)
+                toolRefs.current[letter] = el
+            }}
+          >
+            <Tool
+              payload={tool}
+              viewType={ViewType.flat}
+              hasSearchText={hasSearchText}
+              onSelect={onSelect}
+              canNotSelectMultiple={canNotSelectMultiple}
+              onSelectMultiple={onSelectMultiple}
+              selectedTools={selectedTools}
+              canChooseMCPTool={canChooseMCPTool}
+            />
+          </div>
+        ))}
+      </div>
+      {isShowLetterIndex && indexBar}
     </div>
   )
 }
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index 2130f0160f..83ae062737 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -21,7 +21,6 @@ type Props = {
   className?: string
   payload: ToolWithProvider
   viewType: ViewType
-  isShowLetterIndex: boolean
   hasSearchText: boolean
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
   canNotSelectMultiple?: boolean
@@ -34,7 +33,6 @@ const Tool: FC<Props> = ({
   className,
   payload,
   viewType,
-  isShowLetterIndex,
   hasSearchText,
   onSelect,
   canNotSelectMultiple,
@@ -145,7 +143,7 @@ const Tool: FC<Props> = ({
   return (
     <div
       key={payload.id}
-      className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-6')}
+      className={cn('mb-1 last-of-type:mb-0')}
       ref={ref}
     >
       <div className={cn(className)}>
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index 1721dd72ff..16edf3e8a6 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -43,7 +43,6 @@ const Blocks = ({
   indexBarClassName,
   selectedTools,
   canChooseMCPTool,
-  hasScrollBar,
 }: ToolsProps) => {
   // const tools: any = []
   const { t } = useTranslation()
@@ -127,6 +126,7 @@ const Blocks = ({
             onSelectMultiple={onSelectMultiple}
             selectedTools={selectedTools}
             canChooseMCPTool={canChooseMCPTool}
+            indexBar={<IndexBar letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
           />
         ) : (
           <ToolListTreeView
@@ -140,8 +140,6 @@ const Blocks = ({
           />
         )
       )}
-
-      {isShowLetterIndex && <IndexBar hasScrollBar={!!hasScrollBar} letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
     </div>
   )
 }