From 0aac6da554b5be398a43f0419ade47c25883ee14 Mon Sep 17 00:00:00 2001
From: croatialu <wuli.croatia@foxmail.com>
Date: Fri, 11 Jul 2025 14:19:58 +0800
Subject: [PATCH] fix: Optimize the code editor component, adjust the style and
 structure to ensure the overlay is correctly rendered in the disabled state.

---
 apps/dokploy/components/shared/code-editor.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/dokploy/components/shared/code-editor.tsx b/apps/dokploy/components/shared/code-editor.tsx
index 23e26e887..19ee80114 100644
--- a/apps/dokploy/components/shared/code-editor.tsx
+++ b/apps/dokploy/components/shared/code-editor.tsx
@@ -147,7 +147,7 @@ export const CodeEditor = ({
 }: Props) => {
 	const { resolvedTheme } = useTheme();
 	return (
-		<div className={cn("relative overflow-auto", wrapperClassName)}>
+		<div className={cn("overflow-auto", wrapperClassName)}>
 			<CodeMirror
 				basicSetup={{
 					lineNumbers,
@@ -168,21 +168,22 @@ export const CodeEditor = ({
 					props.lineWrapping ? EditorView.lineWrapping : [],
 					language === "yaml"
 						? autocompletion({
-								override: [dockerComposeComplete],
-							})
+							override: [dockerComposeComplete],
+						})
 						: [],
 				]}
 				{...props}
 				editable={!props.disabled}
 				className={cn(
-					"w-full h-full text-sm leading-relaxed",
+					"w-full h-full text-sm leading-relaxed relative",
 					`cm-theme-${resolvedTheme}`,
 					className,
 				)}
-			/>
-			{props.disabled && (
-				<div className="absolute top-0 rounded-md left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
-			)}
+			>
+				{props.disabled && (
+					<div className="absolute top-0 rounded-md left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
+				)}
+			</CodeMirror>
 		</div>
 	);
 };