Update suggestions position in Code elements (#483)

* draft

* Fix code editor suggestions popover

* Formatting

* Cache monaco options

* Update CHANGELOG.md

---------

Co-authored-by: asimonok <sashasimonok@gmail.com>
Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Updated date and time input timezone (#452)
 - Added dashboard variables support in button titles (#479)
+- Updated suggestions position in Code elements (#483)
 
 ## 4.4.0 (2024-08-29)
 

src/components/FormElement/components/CodeElement/CodeElement.tsx

@@ -1,6 +1,6 @@
 import { InlineField } from '@grafana/ui';
 import { AutosizeCodeEditor } from '@volkovlabs/components';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { FormElementType, TEST_IDS } from '@/constants';
 import { CodeLanguage, FormElementByType, LocalFormElement } from '@/types';
@@ -27,6 +27,18 @@ interface Props {
  * Code Element
  */
 export const CodeElement: React.FC<Props> = ({ element, onChange }) => {
+  /**
+   * Monaco Options
+   */
+  const monacoOptions = useMemo(
+    () => ({
+      formatOnPaste: true,
+      formatOnType: true,
+      fixedOverflowWidgets: false,
+    }),
+    []
+  );
+
   return (
     <InlineField
       label={element.title}
@@ -52,7 +64,7 @@ export const CodeElement: React.FC<Props> = ({ element, onChange }) => {
         }}
         modalTitle={`${element.id} editor`}
         modalButtonTooltip={`Expand ${element.id}`}
-        monacoOptions={{ formatOnPaste: true, formatOnType: true }}
+        monacoOptions={monacoOptions}
         aria-label={TEST_IDS.formElements.fieldCode}
         readOnly={element.disabled}
       />