From 2a14450eeaa0f782b3b55c21130dc6cd85b86bde Mon Sep 17 00:00:00 2001
From: Test <patrick.a.erichsen@gmail.com>
Date: Mon, 30 Dec 2024 17:19:56 -0600
Subject: [PATCH] bugfix(GUI): increase z-index on tippy mentionlist

---
 gui/src/components/mainInput/TipTapEditor.tsx | 17 +++++++----------
 gui/src/components/mainInput/getSuggestion.ts |  4 +++-
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/gui/src/components/mainInput/TipTapEditor.tsx b/gui/src/components/mainInput/TipTapEditor.tsx
index bcd7328a2c..0312b3f539 100644
--- 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();
 
@@ -976,22 +978,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
index 41e6338c18..5ec1f778a7 100644
--- 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;