fix: move HelpDialog outside of Popover to ensure proper behavior

The `HelpDialog` component was previously nested inside the `Popover`, leading to unexpected behavior when attempting to close the dialog. By moving the `HelpDialog` component outside the `Popover`, the components no longer interfere with each other in the DOM tree, resolving the issue.

core/src/components/bottom-status/index.tsx

@@ -1,10 +1,8 @@
 import './index.scss'
 
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
-import { isMacOS } from '../../utils'
-import type { DialogRef } from '../Dialog.tsx'
-import { HelpDialog } from '../editor-zone/HelpDialog.tsx'
+import { Help } from '../editor-zone/Help.tsx'
 import { MonacoScopeContext } from '../EditorZone.tsx'
 import { Popover } from '../Popover.tsx'
 
@@ -16,7 +14,6 @@ const prefix = 'ppd-bottom-status'
 export function BottomStatus() {
   const { editorInstance } = useContext(MonacoScopeContext) ?? {}
 
-  const helpDialogRef = useRef<DialogRef>(null)
 
   const [[line, column], setLineAndColumn] = useState<[number, number]>([0, 0])
   useEffect(() => {
@@ -30,17 +27,7 @@ export function BottomStatus() {
     updateLineAndColumn()
   }, [editorInstance])
   return <div className={`monaco-editor ${prefix}`}>
-    <Popover
-      style={{ cursor: 'pointer' }}
-      offset={[0, 3]}
-      content={<>
-        Find Help(<code>{isMacOS ? '^' : 'Ctrl'}</code> + <code>/</code>)
-      </>}
-      onClick={() => helpDialogRef.current?.open()}
-    >
-      <HelpDialog ref={helpDialogRef} />
-      <div className='cldr codicon codicon-info' />
-    </Popover>
+    <Help />
     <History />
     <TypescriptVersionStatus />
     <Popover style={{ cursor: 'pointer' }}

core/src/components/editor-zone/Help.tsx

@@ -0,0 +1,27 @@
+import { useRef } from 'react'
+
+import { isMacOS } from '../../utils'
+import type { DialogRef } from '../Dialog.tsx'
+import { Popover } from '../Popover.tsx'
+
+import { HelpDialog } from './HelpDialog.tsx'
+
+export function Help() {
+  const helpDialogRef = useRef<DialogRef>(null)
+
+  return (
+    <>
+      <HelpDialog ref={helpDialogRef} />
+      <Popover
+        style={{ cursor: 'pointer' }}
+        offset={[0, 3]}
+        content={<>
+          Find Help(<code>{isMacOS ? '^' : 'Ctrl'}</code> + <code>/</code>)
+        </>}
+        onClick={() => helpDialogRef.current?.open()}
+        >
+        <div className='cldr codicon codicon-info' />
+      </Popover>
+    </>
+  )
+}