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

@@ -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 && (
+				{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" />
+					<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>
 	);
 };