From e4cdb159b01950479bd62de9aed616ad65df7b4c Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Fri, 26 Apr 2024 09:48:13 -0700
Subject: [PATCH] fix(sqllab): invalid css scope for ace editor autocomplete
 (#28156)

---
 .../components/AceEditorWrapper/index.tsx     | 62 ++++++++++++-------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
index a01b1cee76f6f..354d6b1c8fb81 100644
--- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
+++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
@@ -19,8 +19,10 @@
 import React, { useState, useEffect, useRef } from 'react';
 import type { IAceEditor } from 'react-ace/lib/types';
 import { useDispatch } from 'react-redux';
-import { css, styled, usePrevious } from '@superset-ui/core';
+import { css, styled, usePrevious, useTheme } from '@superset-ui/core';
+import { Global } from '@emotion/react';
 
+import { SQL_EDITOR_LEFTBAR_WIDTH } from 'src/SqlLab/constants';
 import { queryEditorSetSelectedText } from 'src/SqlLab/actions/sqlLab';
 import { FullSQLEditor as AceEditor } from 'src/components/AsyncAceEditor';
 import type { KeyboardShortcut } from 'src/SqlLab/components/KeyboardShortcutButton';
@@ -54,16 +56,6 @@ const StyledAceEditor = styled(AceEditor)`
       font-feature-settings:
         'liga' off,
         'calt' off;
-
-      &.ace_autocomplete {
-        // Use !important because Ace Editor applies extra CSS at the last second
-        // when opening the autocomplete.
-        width: ${theme.gridUnit * 130}px !important;
-      }
-
-      .ace_scroller {
-        background-color: ${theme.colors.grayscale.light4};
-      }
     }
   `}
 `;
@@ -182,20 +174,44 @@ const AceEditorWrapper = ({
     },
     !autocomplete,
   );
+  const theme = useTheme();
 
   return (
-    <StyledAceEditor
-      keywords={keywords}
-      onLoad={onEditorLoad}
-      onBlur={onBlurSql}
-      height={height}
-      onChange={onChangeText}
-      width="100%"
-      editorProps={{ $blockScrolling: true }}
-      enableLiveAutocompletion={autocomplete}
-      value={sql}
-      annotations={annotations}
-    />
+    <>
+      <Global
+        styles={css`
+          .ace_text-layer {
+            width: 100% !important;
+          }
+
+          .ace_autocomplete {
+            // Use !important because Ace Editor applies extra CSS at the last second
+            // when opening the autocomplete.
+            width: ${theme.gridUnit * 130}px !important;
+          }
+
+          .ace_tooltip {
+            max-width: ${SQL_EDITOR_LEFTBAR_WIDTH}px;
+          }
+
+          .ace_scroller {
+            background-color: ${theme.colors.grayscale.light4};
+          }
+        `}
+      />
+      <StyledAceEditor
+        keywords={keywords}
+        onLoad={onEditorLoad}
+        onBlur={onBlurSql}
+        height={height}
+        onChange={onChangeText}
+        width="100%"
+        editorProps={{ $blockScrolling: true }}
+        enableLiveAutocompletion={autocomplete}
+        value={sql}
+        annotations={annotations}
+      />
+    </>
   );
 };