From 6bd7c08fe04626db7d77f825566c2432c115dcad Mon Sep 17 00:00:00 2001
From: Davis McPhee <davis.mcphee@elastic.co>
Date: Tue, 3 Dec 2024 20:12:04 -0400
Subject: [PATCH] [ES|QL] Fix editor cursor jumpiness (#202389)

## Summary

Closes https://github.com/elastic/kibana/issues/191216

This PR fixes my least favourite editor bug - the cursor jumpiness! It
turns out this was just due to Monaco editor being picky about styles. I
removed the margin from the editor since that's what was causing the
cursor to be off, and then added an equivalent number of pixels to
`lineDecorationsWidth` so it's visually the same.

I tracked the issue back to this PR in 8.15: #186345. It may not make it
in the last planned 8.15 patch release, but we can backport there anyway
just in case.

Before:


https://github.com/user-attachments/assets/924bbdb4-0ba6-446c-a4ad-63332f43f158

After:


https://github.com/user-attachments/assets/864bedd0-c711-4910-b7a7-6a54e27e9148

Fixes #191216.

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
---
 packages/kbn-esql-editor/src/esql_editor.tsx |  4 +++-
 packages/kbn-esql-editor/src/overwrite.scss  | 14 +++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/kbn-esql-editor/src/esql_editor.tsx b/packages/kbn-esql-editor/src/esql_editor.tsx
index 767bc9026348c..eb3da01abd505 100644
--- a/packages/kbn-esql-editor/src/esql_editor.tsx
+++ b/packages/kbn-esql-editor/src/esql_editor.tsx
@@ -585,7 +585,7 @@ export const ESQLEditor = memo(function ESQLEditor({
     lightbulb: {
       enabled: false,
     },
-    lineDecorationsWidth: 12,
+    lineDecorationsWidth: 20,
     lineNumbers: 'on',
     lineNumbersMinChars: 3,
     minimap: { enabled: false },
@@ -601,7 +601,9 @@ export const ESQLEditor = memo(function ESQLEditor({
     renderLineHighlightOnlyWhenFocus: true,
     scrollbar: {
       horizontal: 'hidden',
+      horizontalScrollbarSize: 6,
       vertical: 'auto',
+      verticalScrollbarSize: 6,
     },
     scrollBeyondLastLine: false,
     theme: darkMode ? ESQL_DARK_THEME_ID : ESQL_LIGHT_THEME_ID,
diff --git a/packages/kbn-esql-editor/src/overwrite.scss b/packages/kbn-esql-editor/src/overwrite.scss
index 0f675c02cd768..9e716b55f3e2b 100644
--- a/packages/kbn-esql-editor/src/overwrite.scss
+++ b/packages/kbn-esql-editor/src/overwrite.scss
@@ -29,15 +29,11 @@
   @include euiTextBreakWord;
 }
 
-// All scrollable containers (e.g. main container and suggest menu)
-.ESQLEditor .monaco-editor .monaco-scrollable-element {
-  margin-left: $euiSizeS;
+// Space between the autocomplete menu and expanded suggestion details
+.ESQLEditor .monaco-editor .suggest-details {
+  padding-left: $euiSizeS;
 }
 
-.ESQLEditor .monaco-editor .monaco-list .monaco-scrollable-element {
-  margin-left: 0;
-
-  .monaco-list-row.focused {
-    border-radius: $euiBorderRadius;
-  }
+.ESQLEditor .monaco-editor .monaco-list .monaco-scrollable-element .monaco-list-row.focused {
+  border-radius: $euiBorderRadius;
 }
\ No newline at end of file