UI fixes (#659)

* fix settings dropdown z-index * fix code blocks glitching during answer generation * hide 'ask bloop' tooltip after click
BloopAI · Jun 19, 2023 · 3d2f171 · 3d2f171
1 parent e4dcf86
commit 3d2f171
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git a/client/src/components/CodeBlock/CodeFull/index.tsx b/client/src/components/CodeBlock/CodeFull/index.tsx
@@ -325,10 +325,11 @@ const CodeFull = ({
 
   const calculatePopupPosition = useCallback(
     (top: number, left: number) => {
-      if (!codeRef.current) {
+      const container = document.getElementById('result-full-code-container');
+      if (!container) {
         return null;
       }
-      const containerRect = codeRef.current?.getBoundingClientRect();
+      const containerRect = container?.getBoundingClientRect();
       if (
         isOnResultPage &&
         (currentSelection.length == 1 || currentSelection.length == 2)
@@ -351,6 +352,8 @@ const CodeFull = ({
 
       if (text) {
         setPopupPosition(calculatePopupPosition(clientY, clientX));
+      } else {
+        setPopupPosition(null);
       }
     };
 
@@ -427,6 +430,7 @@ const CodeFull = ({
                       <button
                         onClick={() => {
                           setChatOpen(true);
+                          setPopupPosition(null);
                           setThreadId('');
                           setConversation([]);
                           setSelectedLines([
@@ -462,6 +466,7 @@ const CodeFull = ({
                             }-${currentSelection[1]![0]}`,
                           );
                           setChatOpen(true);
+                          setPopupPosition(null);
                         }}
                         className="h-8 flex items-center justify-center gap-1 px-2 hover:bg-bg-base-hover caption text-label-title"
                       >

diff --git a/client/src/components/ModalOrSidebar/index.tsx b/client/src/components/ModalOrSidebar/index.tsx
@@ -122,7 +122,9 @@ const ModalOrSidebar = ({
             key="modal"
             className={`modal-or-sidebar overflow-hidden fixed flex flex-col ${
               isSidebar ? `border-y-0` : `rounded-md shadow-float`
-            } bg-bg-shade border border-bg-border z-[110] ${containerClassName}`}
+            } bg-bg-shade border border-bg-border ${
+              isSidebar ? 'z-60' : 'z-[110]'
+            } ${containerClassName}`}
             animate={
               isSidebar
                 ? sidebarAnimation(shouldStretch)

diff --git a/client/src/components/PageTemplate/Subheader.tsx b/client/src/components/PageTemplate/Subheader.tsx
@@ -62,7 +62,7 @@ const Subheader = () => {
   }, [navigationHistory]);
 
   return (
-    <div className="w-full bg-bg-shade py-2 pl-8 pr-6 flex items-center justify-between border-b border-bg-border shadow-medium relative z-90">
+    <div className="w-full bg-bg-shade py-2 pl-8 pr-6 flex items-center justify-between border-b border-bg-border shadow-medium relative z-70">
       <div className="flex flex-1 flex-col gap-3 justify-center overflow-hidden">
         <Breadcrumbs
           pathParts={breadcrumbs}

diff --git a/client/src/pages/ConversationResult/CodeAnotation/AnnotatedFile.tsx b/client/src/pages/ConversationResult/CodeAnotation/AnnotatedFile.tsx
@@ -117,7 +117,7 @@ const AnnotatedFile = ({
   const fullHeight = useMemo(() => {
     return (
       mappedCites.reduce(
-        (prev, cur) => prev + ((cur.end || 0) - (cur.start || 0)),
+        (prev, cur) => prev + Math.max((cur.end || 0) - (cur.start || 0), 0),
         0,
       ) *
         21 +

diff --git a/client/src/pages/ResultFull/index.tsx b/client/src/pages/ResultFull/index.tsx
@@ -166,7 +166,10 @@ const ResultFull = ({ data, isLoading }: Props) => {
               repoPath={result?.repoPath || ''}
             />
           </div>
-          <div className="overflow-scroll flex-1">
+          <div
+            className="overflow-scroll flex-1"
+            id="result-full-code-container"
+          >
             <div className={`flex py-3 px-8 h-full`}>
               {!result ? (
                 <div className="w-full h-full flex flex-col gap-3">