fix(web): stabilize block selector layout (#37089)

web/app/components/plugins/marketplace/search-box/index.tsx

@@ -77,12 +77,12 @@ const SearchBox = ({
         {
           !usedInMarketplace && (
             <>
-              <div className="flex grow items-center py-[7px] pr-3 pl-2">
+              <div className="flex h-8 min-w-0 grow items-center pr-2 pl-2">
                 <RiSearchLine className="size-4 text-components-input-text-placeholder" />
                 <input
                   autoFocus={autoFocus}
                   className={cn(
-                    'mr-1 ml-1.5 inline-block grow appearance-none bg-transparent system-sm-regular text-components-input-text-filled outline-hidden placeholder:text-components-input-text-placeholder',
+                    'mr-1 ml-1.5 inline-block min-w-0 grow appearance-none truncate bg-transparent system-sm-regular text-components-input-text-filled caret-primary-600 outline-hidden placeholder:text-components-input-text-placeholder',
                     search && 'mr-2',
                   )}
                   value={search}
@@ -94,6 +94,7 @@ const SearchBox = ({
                 {
                   search && (
                     <ActionButton
+                      size="xs"
                       onClick={() => onSearchChange('')}
                       className="shrink-0"
                     >

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

@@ -17,6 +17,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@langgenius/dify-ui/popover'
+import { useDebounce } from 'ahooks'
 import * as React from 'react'
 import {
   memo,
@@ -89,6 +90,7 @@ function NodeSelector({
   const { t } = useTranslation()
   const nodes = useNodes()
   const [searchText, setSearchText] = useState('')
+  const debouncedSearchText = useDebounce(searchText, { wait: 500 })
   const [tags, setTags] = useState<string[]>([])
   const [localOpen, setLocalOpen] = useState(false)
   // Exclude nodes explicitly ignored (such as the node currently being edited) when checking canvas state.
@@ -159,6 +161,9 @@ function NodeSelector({
   const handleActiveTabChange = useCallback((newActiveTab: TabsEnum) => {
     setActiveTab(newActiveTab)
   }, [setActiveTab])
+  const filterSearchText = activeTab === TabsEnum.Start || activeTab === TabsEnum.Tools
+    ? debouncedSearchText
+    : searchText
 
   const searchPlaceholder = useMemo(() => {
     if (activeTab === TabsEnum.Start)
@@ -223,7 +228,7 @@ function NodeSelector({
         alignOffset={alignOffset}
         popupClassName="border-none bg-transparent shadow-none"
       >
-        <div className={`rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg ${popupClassName}`}>
+        <div className={cn('w-[400px] min-w-0 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg', popupClassName)}>
           <Tabs
             tabs={tabs}
             activeTab={activeTab}
@@ -240,7 +245,8 @@ function NodeSelector({
                     tags={tags}
                     onTagsChange={setTags}
                     placeholder={searchPlaceholder}
-                    inputClassName="grow"
+                    wrapperClassName="w-full min-w-0"
+                    inputClassName="min-w-0 grow"
                   />
                 )}
                 {activeTab === TabsEnum.Blocks && (
@@ -273,13 +279,14 @@ function NodeSelector({
                     tags={tags}
                     onTagsChange={setTags}
                     placeholder={t('searchTools', { ns: 'plugin' })!}
-                    inputClassName="grow"
+                    wrapperClassName="w-full min-w-0"
+                    inputClassName="min-w-0 grow"
                   />
                 )}
               </div>
             )}
             onSelect={handleSelect}
-            searchText={searchText}
+            searchText={filterSearchText}
             tags={tags}
             availableBlocksTypes={availableBlocksTypes}
             noBlocks={noBlocks}

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

@@ -219,10 +219,10 @@ const Tabs: FC<TabsProps> = ({
   }, [normalizedBuiltInTools, normalizedCustomTools, normalizedMcpTools, normalizedWorkflowTools, workflowStore])
 
   return (
-    <div onClick={e => e.stopPropagation()}>
+    <div className="w-full min-w-0" onClick={e => e.stopPropagation()}>
       {
         !noBlocks && (
-          <div className="relative flex bg-background-section-burn pt-1 pl-1">
+          <div className="relative flex w-full min-w-0 bg-background-section-burn pt-1 pl-1">
             {
               tabs.map(tab => (
                 <TabHeaderItem