[v11.1.x] Bugfix: QueryField typeahead missing background color (#92316)

Bugfix: QueryField typeahead missing background color (#92216)

Added missing styles to the typeahead menu.

(cherry picked from commit 95409f53d2)

Co-authored-by: Marcus Andersson <marcus.andersson@grafana.com>

packages/grafana-ui/src/components/Typeahead/Typeahead.tsx

@@ -220,7 +220,7 @@ class Portal extends PureComponent<React.PropsWithChildren<PortalProps>, {}> {
     const { index = 0, origin = 'query', style } = props;
     this.node = document.createElement('div');
     this.node.setAttribute('style', style);
-    this.node.classList.add(`slate-typeahead`, `slate-typeahead-${origin}-${index}`);
+    this.node.classList.add(`slate-typeahead-${origin}-${index}`);
     document.body.appendChild(this.node);
   }
 
@@ -243,8 +243,18 @@ class Portal extends PureComponent<React.PropsWithChildren<PortalProps>, {}> {
 
 const getStyles = (theme: GrafanaTheme2) => ({
   typeahead: css({
-    maxHeight: 300,
-    overflowY: 'auto',
+    position: 'relative',
+    zIndex: theme.zIndex.typeahead,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.components.panel.borderColor}`,
+    maxHeight: '66vh',
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    outline: 'none',
+    listStyle: 'none',
+    background: theme.components.panel.background,
+    color: theme.colors.text.primary,
+    boxShadow: theme.shadows.z2,
 
     strong: {
       color: theme.v1.palette.yellow,