diff --git a/src/components/Graphs/Graph.module.css b/src/components/Graphs/Graph.module.css index 15a3d0e9..f3a56eaf 100644 --- a/src/components/Graphs/Graph.module.css +++ b/src/components/Graphs/Graph.module.css @@ -4,14 +4,21 @@ border: 1px solid var(--sapList_BorderColor, #ddd); border-radius: 16px; overflow: hidden; + overflow-x: hidden !important; background-color: var(--sapBackgroundColor, #fafafa); font-family: var(--sapFontFamily); + width: 100%; + max-width: 100%; + box-sizing: border-box; } .graphColumn { flex: 1; display: flex; flex-direction: column; + overflow-x: hidden !important; + width: 100%; + max-width: 100%; } .graphHeader { @@ -66,7 +73,19 @@ :global([data-theme='dark'] .react-flow__controls-button) { background: transparent; color: #fff; - border-color: rgba(255, 255, 255, 0.25); +} + +/* Force ReactFlow to not have horizontal scroll */ +:global(.react-flow) { + overflow-x: hidden !important; +} + +:global(.react-flow__pane) { + overflow-x: hidden !important; +} + +:global(.react-flow__viewport) { + overflow-x: hidden !important; } :global([data-theme='dark'] .react-flow__controls-button:hover) { diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx index f4974b54..d74771d8 100644 --- a/src/components/Graphs/Graph.tsx +++ b/src/components/Graphs/Graph.tsx @@ -95,7 +95,8 @@ const Graph: React.FC = () => { nodesConnectable={false} elementsSelectable={false} zoomOnScroll={true} - panOnDrag={true} + panOnDrag={false} + preventScrolling={true} > diff --git a/src/spaces/mcp/pages/McpPage.module.css b/src/spaces/mcp/pages/McpPage.module.css index 4d46900a..7511f791 100644 --- a/src/spaces/mcp/pages/McpPage.module.css +++ b/src/spaces/mcp/pages/McpPage.module.css @@ -2,4 +2,5 @@ max-width: 1280px; margin: 0.1em auto -8px auto; width: 100%; + overflow-x: hidden; } diff --git a/src/spaces/mcp/pages/McpPage.tsx b/src/spaces/mcp/pages/McpPage.tsx index de04cac0..31d69583 100644 --- a/src/spaces/mcp/pages/McpPage.tsx +++ b/src/spaces/mcp/pages/McpPage.tsx @@ -107,7 +107,15 @@ export default function McpPage() { titleText={t('McpPage.graphTitle')} hideTitleText > - + {t('McpPage.graphTitle')}} + noAnimation + > + +