diff --git a/src/lib/components/common/CodeEditorModal.svelte b/src/lib/components/common/CodeEditorModal.svelte
index b2ff76aa24..10f443ff3f 100644
--- a/src/lib/components/common/CodeEditorModal.svelte
+++ b/src/lib/components/common/CodeEditorModal.svelte
@@ -26,7 +26,7 @@
 	});
 </script>
 
-<Drawer bind:show className="h-full">
+<Drawer bind:show className="h-full" zIndexClass="z-99999">
 	<div class="flex h-full flex-col">
 		<div
 			class=" sticky top-0 z-30 flex justify-between bg-white px-4.5 pt-3 pb-3 dark:bg-gray-900 dark:text-gray-100"
diff --git a/src/lib/components/common/Drawer.svelte b/src/lib/components/common/Drawer.svelte
index 8a52da2b92..191dd31c83 100644
--- a/src/lib/components/common/Drawer.svelte
+++ b/src/lib/components/common/Drawer.svelte
@@ -5,6 +5,7 @@
 
 	export let show = false;
 	export let className = '';
+	export let zIndexClass = 'z-999';
 	export let onClose = () => {};
 
 	let modalElement = null;
@@ -57,7 +58,7 @@
 {#if show}
 	<div
 		bind:this={modalElement}
-		class="modal fixed right-0 bottom-0 left-0 z-999 flex h-screen max-h-[100dvh] w-full justify-center overflow-hidden overscroll-contain bg-black/60"
+		class="modal fixed right-0 bottom-0 left-0 {zIndexClass} flex h-screen max-h-[100dvh] w-full justify-center overflow-hidden overscroll-contain bg-black/60"
 		in:fly={{ y: 100, duration: 100 }}
 		on:mousedown={() => {
 			show = false;