From 28ba274f1f6f7a6e80fb0c56708976f1c1e0ba01 Mon Sep 17 00:00:00 2001
From: Scott Gress <scottmgress@gmail.com>
Date: Tue, 20 May 2025 16:56:52 -0500
Subject: [PATCH] Fix SQL query editor cursor alignment issue (#28878)

for #27233

# Checklist for submitter

- [X] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.

## Details

This PR fixes an issue where the cursor in the SQL editor would become
misaligned under some circumstances. I was never able to reproduce this
personally, but big thanks to @mason-buettner for both the reproduction
and testing this fix.

The issue seems to stem from the Ace editor having a hard time dealing
with CSS scaling. I'm not sure what circumstances actually cause this to
occur, but a combination of Google and ChatGPT lead me to
https://github.com/securingsincity/react-ace/issues/750 and
https://github.com/ajaxorg/ace/issues/4794 which I combined for this fix
which seems to work.
---
 changes/27233-fix-cursor-alignment-issue    | 1 +
 frontend/components/SQLEditor/SQLEditor.tsx | 2 +-
 frontend/components/SQLEditor/_styles.scss  | 7 +++++++
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 changes/27233-fix-cursor-alignment-issue

diff --git a/changes/27233-fix-cursor-alignment-issue b/changes/27233-fix-cursor-alignment-issue
new file mode 100644
index 0000000000..306612d02b
--- /dev/null
+++ b/changes/27233-fix-cursor-alignment-issue
@@ -0,0 +1 @@
+- Fixed an issue where the cursor on the SQL editor would sometimes become misaliged
diff --git a/frontend/components/SQLEditor/SQLEditor.tsx b/frontend/components/SQLEditor/SQLEditor.tsx
index 73e88ce8fb..2ccad9fbfa 100644
--- a/frontend/components/SQLEditor/SQLEditor.tsx
+++ b/frontend/components/SQLEditor/SQLEditor.tsx
@@ -280,7 +280,7 @@ const SQLEditor = ({
         onBlur={onBlurHandler}
         onLoad={onLoadHandler}
         readOnly={readOnly}
-        setOptions={{ enableLinking: true }}
+        setOptions={{ enableLinking: true, hasCssTransforms: true }}
         showGutter={showGutter}
         showPrintMargin={false}
         theme="fleet"
diff --git a/frontend/components/SQLEditor/_styles.scss b/frontend/components/SQLEditor/_styles.scss
index 331276f1d0..1373278275 100644
--- a/frontend/components/SQLEditor/_styles.scss
+++ b/frontend/components/SQLEditor/_styles.scss
@@ -53,3 +53,10 @@
     margin: 0;
   }
 }
+
+.sql-editor,
+.sql-editor * {
+  letter-spacing: normal !important;
+  word-spacing: normal !important;
+  font-family: 'SourceCodePro', monospace !important;
+}