Merge pull request #3572 from continuedev/pe/bugfix-mentionlist-z-index

bugfix(GUI): increase z-index on tippy mentionlist
continuedev · Dec 30, 2024 · 5251852 · 5251852
2 parents 442a88f + 2a14450
commit 5251852
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/gui/src/components/mainInput/TipTapEditor.tsx b/gui/src/components/mainInput/TipTapEditor.tsx
@@ -175,6 +175,8 @@ interface TipTapEditorProps {
   historyKey: string;
 }
 
+export const TIPPY_DIV_ID = "tippy-js-div";
+
 function TipTapEditor(props: TipTapEditorProps) {
   const dispatch = useAppDispatch();
 
@@ -990,22 +992,17 @@ function TipTapEditor(props: TipTapEditorProps) {
 
       {showDragOverMsg &&
         modelSupportsImages(
-          defaultModel.provider,
-          defaultModel.model,
-          defaultModel.title,
-          defaultModel.capabilities,
+          defaultModel?.provider || "",
+          defaultModel?.model || "",
+          defaultModel?.title,
+          defaultModel?.capabilities,
         ) && (
           <>
             <HoverDiv></HoverDiv>
             <HoverTextDiv>Hold ⇧ to drop image</HoverTextDiv>
           </>
         )}
-      <div
-        id="tippy-js-div"
-        style={{
-          position: "fixed",
-        }}
-      />
+      <div id={TIPPY_DIV_ID} className="fixed z-50" />
     </InputBoxDiv>
   );
 }

diff --git a/gui/src/components/mainInput/getSuggestion.ts b/gui/src/components/mainInput/getSuggestion.ts
@@ -5,6 +5,7 @@ import tippy from "tippy.js";
 import { IIdeMessenger } from "../../context/IdeMessenger";
 import MentionList from "./MentionList";
 import { ComboBoxItem, ComboBoxItemType, ComboBoxSubAction } from "./types";
+import { TIPPY_DIV_ID } from "./TipTapEditor";
 
 function getSuggestion(
   items: (props: { query: string }) => Promise<ComboBoxItem[]>,
@@ -37,7 +38,8 @@ function getSuggestion(
             return;
           }
 
-          const container = document.getElementById("tippy-js-div");
+          const container = document.getElementById(TIPPY_DIV_ID);
+
           if (!container) {
             console.log("no container");
             return;