Fix: Tag filter scroll (#5863)

* fix: timeselector ui error

* var update node

* tag filter scroll

packages/web/components/core/plugin/tool/TagFilterBox.tsx

@@ -68,7 +68,7 @@ const ToolTagFilterBox = ({
         },
         },
         '&::-webkit-scrollbar': {
         '&::-webkit-scrollbar': {
           marginTop: '2px',
           marginTop: '2px',
-          height: '4px'
+          height: '6px'
         },
         },
         '&::-webkit-scrollbar-track': {
         '&::-webkit-scrollbar-track': {
           background: 'transparent'
           background: 'transparent'

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/components/NodeTemplates/header.tsx

@@ -65,8 +65,11 @@ const NodeTemplateListHeader = ({
     }
     }
   );
   );
 
 
+  const showToolTag =
+    templateType === TemplateTypeEnum.appTool && selectedTagIds !== undefined && setSelectedTagIds;
+
   return (
   return (
-    <Box px={'5'} mb={3} whiteSpace={'nowrap'} overflow={'hidden'}>
+    <Box px={'5'} mb={showToolTag ? 0.5 : 2} whiteSpace={'nowrap'} overflow={'hidden'}>
       {/* Tabs */}
       {/* Tabs */}
       <Flex flex={'1 0 0'} alignItems={'center'} gap={2}>
       <Flex flex={'1 0 0'} alignItems={'center'} gap={2}>
         <Box flex={'1 0 0'}>
         <Box flex={'1 0 0'}>
@@ -178,7 +181,7 @@ const NodeTemplateListHeader = ({
       {templateType === TemplateTypeEnum.appTool &&
       {templateType === TemplateTypeEnum.appTool &&
         selectedTagIds !== undefined &&
         selectedTagIds !== undefined &&
         setSelectedTagIds && (
         setSelectedTagIds && (
-          <Box mt={2} mb={-1}>
+          <Box mt={2}>
             <ToolTagFilterBox
             <ToolTagFilterBox
               tags={toolTags}
               tags={toolTags}
               selectedTagIds={selectedTagIds}
               selectedTagIds={selectedTagIds}

projects/app/src/pages/plugin/tool/index.tsx

@@ -190,8 +190,8 @@ const ToolKitProvider = () => {
             )}
             )}
           </Flex>
           </Flex>
           {/* Tags */}
           {/* Tags */}
-          <Flex mt={2} mb={3} alignItems={'start'}>
-            <Flex alignItems={'center'}>
+          <Flex mt={2} mb={3} alignItems={'center'}>
+            <Flex alignItems={'start'} flex={'1 0 0'} w={0} mr={[3, 10]}>
               <Flex
               <Flex
                 alignItems={'center'}
                 alignItems={'center'}
                 transition={'all 0.3s'}
                 transition={'all 0.3s'}
@@ -262,15 +262,15 @@ const ToolKitProvider = () => {
                   </Flex>
                   </Flex>
                 )}
                 )}
               </Flex>
               </Flex>
+              <Box flex={'1'} overflow={'auto'} mb={-1}>
+                <ToolTagFilterBox
+                  tags={tags}
+                  selectedTagIds={selectedTagIds}
+                  onTagSelect={setSelectedTagIds}
+                />
+              </Box>
             </Flex>
             </Flex>
-            <Box flex={'1'} overflow={'auto'} mb={-1}>
-              <ToolTagFilterBox
-                tags={tags}
-                selectedTagIds={selectedTagIds}
-                onTagSelect={setSelectedTagIds}
-              />
-            </Box>
-            <Box w={10} />
+
             <MyMenu
             <MyMenu
               trigger="hover"
               trigger="hover"
               Button={
               Button={