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; +}