diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
index d14de7d58b..886b23f18b 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/__tests__/index.spec.tsx
@@ -704,6 +704,7 @@ describe('ComponentPicker (component-picker-block/index.tsx)', () => {
     await setEditorText(editor, '{', true)
     const typeaheadMenu = document.getElementById('typeahead-menu')
     expect(typeaheadMenu).not.toBeNull()
+    expect(typeaheadMenu).toHaveClass('z-50')
 
     const ce = screen.getByTestId(CONTENT_EDITABLE_TEST_ID)
     const fiber = getReactFiberFromDom(ce)
diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
index 01612689cf..5aa207e2d3 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
@@ -318,7 +318,7 @@ const ComponentPicker = ({
       //
       // We no need the position function of the `LexicalTypeaheadMenuPlugin`,
       // so the reference anchor should be positioned based on the range of the trigger string, and the menu will be positioned by the floating ui.
-      anchorClassName="z-999999 translate-y-[calc(-100%-3px)]"
+      anchorClassName="z-50 translate-y-[calc(-100%-3px)]"
       menuRenderFn={renderMenu}
       triggerFn={checkForTriggerMatch}
     />