fix

Author: lucasgoral

src/components/Graphs/Graph.tsx

@@ -15,8 +15,6 @@ import { useSplitter } from '../Splitter/SplitterContext.tsx';
 import { YamlSidePanel } from '../Yaml/YamlSidePanel.tsx';
 import { Resource } from '../../utils/removeManagedFieldsAndFilterData.ts';
 
-
-
 const nodeTypes = {
   custom: (props: NodeProps<Node<NodeData, 'custom'>>) => (
     <CustomNode

src/components/Wizards/CreateManagedControlPlane/SummarizeStep.module.css

@@ -0,0 +1,4 @@
+.wrapper {
+  position: relative;
+  height: 100%;
+}

src/components/Wizards/CreateManagedControlPlane/SummarizeStep.tsx

@@ -11,8 +11,9 @@ import YamlPanel from '../../Yaml/YamlPanel.tsx';
 import { idpPrefix } from '../../../utils/idpPrefix.ts';
 import { UseFormWatch } from 'react-hook-form';
 import { CreateDialogProps } from '../../Dialogs/CreateWorkspaceDialogContainer.tsx';
-import { YamlDiff } from '../../Yaml/YamlDiff.tsx';
 
+import styles from './SummarizeStep.module.css';
+import { YamlDiff } from './YamlDiff.tsx';
 interface SummarizeStepProps {
   watch: UseFormWatch<CreateDialogProps>;
   projectName: string;
@@ -46,7 +47,7 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
     ),
   );
   return (
-    <>
+    <div className={styles.wrapper}>
       <Title>{t('common.summarize')}</Title>
       <Grid defaultSpan="XL6 L6 M6 S6">
         <div>
@@ -96,6 +97,6 @@ export const SummarizeStep: React.FC<SummarizeStepProps> = ({
           )}
         </div>
       </Grid>
-    </>
+    </div>
   );
 };

src/components/Wizards/CreateManagedControlPlane/YamlDiff.module.css

@@ -0,0 +1,8 @@
+.container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: calc(50% - 2rem);
+  right: 0;
+  overflow: hidden;
+}

src/components/Yaml/YamlDiff.tsx renamed to src/components/Wizards/CreateManagedControlPlane/YamlDiff.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 
-import { YamlDiffEditor } from '../YamlEditor/YamlDiffEditor.tsx';
 import styles from './YamlDiff.module.css';
+import { YamlDiffEditor } from '../../YamlEditor/YamlDiffEditor.tsx';
 type YamlDiffProps = {
   originalYaml: string;
   modifiedYaml: string;

src/components/Yaml/YamlDiff.module.css

@@ -37,7 +37,7 @@ const YamlPanel: FC<YamlPanelProps> = ({ yamlString, filename }) => {
           </Button>
         )}
       </FlexBox>
-      <YamlViewer yamlString={yamlString} />
+      <YamlViewer yamlString={yamlString} filename={'summarize'} />
     </div>
   );
 };

src/components/Yaml/YamlPanel.tsx

@@ -17,7 +17,7 @@ export const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
     <div className={styles.container}>
       {/* Use controlled value with a stable model path to update content without remounting */}
 
-      <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: false }} />
+      <YamlEditor value={yamlString} path={`${filename}.yaml`} options={{ readOnly: true }} />
     </div>
   );
 };

src/components/Yaml/YamlViewer.tsx

@@ -37,14 +37,5 @@ export const YamlDiffEditor = (props: YamlDiffEditorProps) => {
     readOnly: true,
   };
 
-  return (
-    <DiffEditor
-      {...rest}
-      theme={computedTheme}
-      options={simplifiedOptions}
-      height="100%"
-      // Force YAML language for both panes
-      language="yaml"
-    />
-  );
+  return <DiffEditor {...rest} theme={computedTheme} options={simplifiedOptions} height="100%" language="yaml" />;
 };