fix code mirror position and auto scroll

package.json

@@ -39,7 +39,7 @@
     "@babel/runtime": "7.20.13",
     "@babel/runtime-corejs3": "7.20.13",
     "@back4app/back4app-settings": "1.6.5",
-    "@back4app2/react-components": "1.0.0-beta.440.30",
+    "@back4app2/react-components": "1.0.0-beta.440.36",
     "@codemirror/lang-css": "6.3.0",
     "@codemirror/lang-html": "6.4.9",
     "@codemirror/lang-javascript": "6.2.2",

src/components/B4ACodeTree/B4ACodeTree.scss

@@ -238,7 +238,10 @@
 
 .filesPreviewWrapper {
   height: 100%;
-  overflow: hidden;
+  // Important: don't create an overflow-clipping ancestor here, otherwise
+  // CodeMirror's search panel (position: sticky) won't stick to the actual
+  // scroll container (which is higher up in the dashboard layout).
+  overflow: visible;
 
   .filesPreviewHeader {
     @include InterFont;
@@ -259,6 +262,20 @@
       outline: none;
     }
   }
+
+  // Keep CodeMirror's search panel visible while scrolling the code area.
+  // The search panel is rendered by @codemirror/search (Ctrl/Cmd+F).
+  :global(.cm-panels-top) {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    background: #0A0B0C;
+    border-bottom: 1px solid rgba(249, 249, 249, 0.06);
+  }
+
+  :global(.cm-panels-top .cm-search) {
+    background: #0A0B0C;
+  }
 }
 
 .folderInfoWrapper {

src/components/CodeEditor/B4aCodeEditor.react.js

@@ -7,6 +7,7 @@ import { json } from '@codemirror/lang-json';
 import { xml } from '@codemirror/lang-xml';
 import { linter, lintGutter } from '@codemirror/lint';
 import { search } from '@codemirror/search';
+import { EditorView } from '@codemirror/view';
 import globals from 'globals';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
@@ -141,7 +142,11 @@ const B4aCodeEditor = forwardRef(({ code: initialCode, onCodeChange, mode, readO
       extensions={[
         ...getLanguageExtension(),
         lintGutter(),
-        search({ top: true})
+        search({
+          top: true,
+          // Ensure Enter/Next/Prev in the search panel scrolls the editor to the selected match.
+          scrollToMatch: (range) => EditorView.scrollIntoView(range.from, { y: 'center' }),
+        })
       ]}
       onChange={(value) => {
         handleCodeChange(value)