fix: scrollbar effect

web/app/components/workflow/block-selector/all-tools.tsx

@@ -21,6 +21,7 @@ import PluginList, { type ListProps } from '@/app/components/workflow/block-sele
 import { PluginType } from '../../plugins/types'
 import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import useCheckVerticalScrollbar from './use-check-vertical-scrollbar'
 
 type AllToolsProps = {
   className?: string
@@ -107,6 +108,7 @@ const AllTools = ({
 
   const pluginRef = useRef<ListRef>(null)
   const wrapElemRef = useRef<HTMLDivElement>(null)
+  const hasVerticalScrollbar = useCheckVerticalScrollbar(wrapElemRef)
   const isSupportGroupView = [ToolTypeEnum.All, ToolTypeEnum.BuiltIn].includes(activeTab)
 
   return (
@@ -149,6 +151,7 @@ const AllTools = ({
           hasSearchText={!!searchText}
           selectedTools={selectedTools}
           canChooseMCPTool={canChooseMCPTool}
+          hasScrollBar={hasVerticalScrollbar}
         />
         {/* Plugins from marketplace */}
         {enable_marketplace && <PluginList

web/app/components/workflow/block-selector/index-bar.tsx

@@ -74,17 +74,18 @@ type IndexBarProps = {
   letters: string[]
   itemRefs: RefObject<{ [key: string]: HTMLElement | null }>
   className?: string
+  hasScrollBar: boolean
 }
 
-const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
+const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className, hasScrollBar }) => {
   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', className)}>
+    <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='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>
+      <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)}>
           {letter}

web/app/components/workflow/block-selector/tool/tool.tsx

@@ -145,7 +145,7 @@ const Tool: FC<Props> = ({
   return (
     <div
       key={payload.id}
-      className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-2')}
+      className={cn('mb-1 last-of-type:mb-0', isShowLetterIndex && 'mr-6')}
       ref={ref}
     >
       <div className={cn(className)}>

web/app/components/workflow/block-selector/tools.tsx

@@ -26,6 +26,7 @@ type ToolsProps = {
   indexBarClassName?: string
   selectedTools?: ToolValue[]
   canChooseMCPTool?: boolean
+  hasScrollBar: boolean
 }
 const Blocks = ({
   showWorkflowEmpty,
@@ -39,6 +40,7 @@ const Blocks = ({
   indexBarClassName,
   selectedTools,
   canChooseMCPTool,
+  hasScrollBar,
 }: ToolsProps) => {
   const { t } = useTranslation()
   const language = useGetLanguage()
@@ -131,7 +133,7 @@ const Blocks = ({
         )
       )}
 
-      {isShowLetterIndex && <IndexBar letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
+      {isShowLetterIndex && <IndexBar hasScrollBar={hasScrollBar} letters={letters} itemRefs={toolRefs} className={indexBarClassName} />}
     </div>
   )
 }

web/app/components/workflow/block-selector/use-check-vertical-scrollbar.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+const useCheckVerticalScrollbar = (ref: React.RefObject<HTMLElement>) => {
+  const [hasVerticalScrollbar, setHasVerticalScrollbar] = useState(false)
+
+  useEffect(() => {
+    const elem = ref.current
+    if (!elem) return
+
+    const checkScrollbar = () => {
+      setHasVerticalScrollbar(elem.scrollHeight > elem.clientHeight)
+    }
+
+    checkScrollbar()
+
+    const resizeObserver = new ResizeObserver(checkScrollbar)
+    resizeObserver.observe(elem)
+
+    const mutationObserver = new MutationObserver(checkScrollbar)
+    mutationObserver.observe(elem, { childList: true, subtree: true, characterData: true })
+
+    return () => {
+      resizeObserver.disconnect()
+      mutationObserver.disconnect()
+    }
+  }, [ref])
+
+  return hasVerticalScrollbar
+}
+
+export default useCheckVerticalScrollbar