Merge pull request #1471 from digma-ai/fix/mcps-layout

Fix MCP icons layout

Author: kshmidt-digma

src/components/Agentic/common/AgentFlowChart/MCPServersContainer/styles.ts

@@ -6,8 +6,20 @@ const DEFAULT_MCP_SERVER_BLOCK_SIZE = 50; // in pixels
 
 export const Container = styled.div<ContainerProps>`
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   gap: ${({ $zoomLevel }) =>
     $zoomLevel ? $zoomLevel * DEFAULT_GAP_SIZE : DEFAULT_GAP_SIZE}px;
+  max-width: calc(
+    3 *
+      ${({ $zoomLevel }) =>
+        $zoomLevel
+          ? $zoomLevel * DEFAULT_MCP_SERVER_BLOCK_SIZE
+          : DEFAULT_MCP_SERVER_BLOCK_SIZE}px +
+      2 *
+      ${({ $zoomLevel }) =>
+        $zoomLevel ? $zoomLevel * DEFAULT_GAP_SIZE : DEFAULT_GAP_SIZE}px
+  );
 `;
 
 export const MCPServerBlock = styled.div<MCPServerBlockProps>`

src/components/Agentic/common/AgentFlowChart/MCPServersToolbar/index.tsx

@@ -99,7 +99,7 @@ export const MCPServersToolbar = ({
           <div>
             <Tooltip title={x.display_name}>
               <s.MCPServerIconContainer $isEditable={x.isEditable}>
-                <MCPServerIcon server={x} size={17} />
+                <MCPServerIcon server={x} size={s.MCP_SERVER_ICON_SIZE} />
               </s.MCPServerIconContainer>
             </Tooltip>
           </div>

src/components/Agentic/common/AgentFlowChart/MCPServersToolbar/styles.ts

@@ -1,8 +1,12 @@
 import styled from "styled-components";
 import type { ContainerProps, MCPServerIconContainerProps } from "./types";
 
+const GAP = 6; // in pixels
+export const MCP_SERVER_ICON_SIZE = 17; // in pixels
+
 export const Container = styled.div<ContainerProps>`
   display: flex;
+  flex-wrap: wrap;
   gap: 6px;
   align-items: center;
   justify-content: center;
@@ -17,6 +21,14 @@ export const Container = styled.div<ContainerProps>`
       rgb(255 255 255 / 10%) 0%,
       rgb(255 255 255 / 0%) 100%
     );
+  max-width: calc(
+    3 *
+      ${({ $zoomLevel }) =>
+        $zoomLevel
+          ? $zoomLevel * MCP_SERVER_ICON_SIZE
+          : MCP_SERVER_ICON_SIZE}px +
+      2 * ${({ $zoomLevel }) => ($zoomLevel ? $zoomLevel * GAP : GAP)}px
+  );
 `;
 
 export const MCPServerIconContainer = styled.div<MCPServerIconContainerProps>`