fix: Mcp composer tool header fix (#9161)

* fix header and button alignment

* color enhancement

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/components/core/parameterRenderComponent/components/ToolsComponent/index.tsx

@@ -61,47 +61,36 @@ export default function ToolsComponent({
         icon={icon}
       />
       <div
-        className="relative flex flex-col w-full gap-3"
+        className="relative flex items-center w-full gap-3"
         data-testid={"div-" + id}
       >
-        <div className="flex flex-row justify-between">
-          <div className="flex flex-row justify-between">
-            <ShadTooltip
-              content="Flows in this project can be exposed as callable MCP tools."
-              side="right"
-            >
-              <div
-                className={cn(
-                  "flex items-center hover:cursor-help",
-                  !ENABLE_MCP_COMPOSER && "text-mmd",
-                )}
-              >
-                Flows/Tools
-                <ForwardedIconComponent
-                  name="info"
-                  className="ml-1.5 h-4 w-4 text-muted-foreground"
-                  aria-hidden="true"
-                />
-              </div>
-            </ShadTooltip>
-          </div>
         {(visibleActions.length > 0 || isAction) && (
           <Button
-              variant={ENABLE_MCP_COMPOSER ? "outline" : "ghost"}
+            variant={
+              ENABLE_MCP_COMPOSER && button_description ? "outline" : "ghost"
+            }
             disabled={!value || disabled}
             size="sm"
             data-testid="button_open_actions"
             onClick={() => setIsModalOpen(true)}
+            className={cn(
+              "absolute -top-8 right-0 !text-mmd font-normal group-hover:text-primary",
+              !button_description ? "text-muted-foreground" : "",
+            )}
           >
             <ForwardedIconComponent
-                name={ENABLE_MCP_COMPOSER ? "wrench" : "Settings2"}
+              name={
+                ENABLE_MCP_COMPOSER && button_description
+                  ? "wrench"
+                  : "Settings2"
+              }
               className="icon-size"
               strokeWidth={ICON_STROKE_WIDTH}
             />
             {button_description}
           </Button>
         )}
-        </div>
+
         {!value ? (
           <div className="flex w-full flex-wrap gap-1 overflow-hidden py-1.5">
             {[...Array(4)].map((_, index) => (

src/frontend/src/pages/MainPage/pages/homePage/components/McpServerTab.tsx

@@ -390,7 +390,22 @@ const McpServerTab = ({ folderName }: { folderName: string }) => {
       </div>
       <div className="flex flex-col justify-between gap-8 xl:flex-row">
         <div className="w-full xl:w-2/5">
-          <div className="flex flex-row flex-wrap gap-2">
+          <div className="flex flex-row justify-between pt-1">
+            <ShadTooltip
+              content="Flows in this project can be exposed as callable MCP tools."
+              side="right"
+            >
+              <div className="flex items-center text-mmd font-medium hover:cursor-help">
+                Flows/Tools
+                <ForwardedIconComponent
+                  name="info"
+                  className="ml-1.5 h-4 w-4 text-muted-foreground"
+                  aria-hidden="true"
+                />
+              </div>
+            </ShadTooltip>
+          </div>
+          <div className="flex flex-row flex-wrap gap-2 pt-2">
             <ToolsComponent
               value={flowsMCPData}
               title="MCP Server Tools"

src/frontend/tests/core/features/filterSidebar.spec.ts

@@ -73,7 +73,9 @@ test(
     await expect(page.getByTestId("input_outputChat Input")).toBeVisible();
     await expect(page.getByTestId("input_outputChat Output")).toBeVisible();
     await expect(page.getByTestId("processingPrompt Template")).toBeVisible();
-    await expect(page.getByTestId("langchain_utilitiesCSV Agent")).toBeVisible();
+    await expect(
+      page.getByTestId("langchain_utilitiesCSV Agent"),
+    ).toBeVisible();
     await expect(
       page.getByTestId("langchain_utilitiesConversationChain"),
     ).toBeVisible();