fix

Author: brendan-kellam

packages/web/src/ee/features/codeNav/components/symbolHoverPopup/index.tsx

@@ -7,6 +7,7 @@ import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { SymbolDefinition, useHoveredOverSymbolInfo } from "./useHoveredOverSymbolInfo";
 import { SymbolDefinitionPreview } from "./symbolDefinitionPreview";
+import { createPortal } from "react-dom";
 
 interface SymbolHoverPopupProps {
     editorRef: ReactCodeMirrorRef;
@@ -55,9 +56,11 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
                         crossAxis: false,
                         fallbackPlacements: ['bottom'],
                         boundary: editorRef.view?.dom,
+                        padding: 20,
                     }),
                     shift({
                         padding: 5,
+                        boundary: editorRef.view?.dom,
                     })
                 ]
             }).then(({ x, y }) => {
@@ -92,47 +95,47 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
     }, [symbolInfo, onGotoDefinition]);
 
     return symbolInfo ? (
-        <div
-            ref={ref}
-            className="absolute z-10 flex flex-col gap-2 bg-background border border-gray-300 dark:border-gray-700 rounded-md shadow-lg p-2 max-w-3xl"
-            onMouseOver={() => setIsSticky(true)}
-            onMouseOut={() => setIsSticky(false)}
-        >
-            {symbolInfo.isSymbolDefinitionsLoading ? (
-                <div className="flex flex-row items-center gap-2 text-sm">
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    Loading...
+            <div
+                ref={ref}
+                className="absolute z-10 flex flex-col gap-2 bg-background border border-gray-300 dark:border-gray-700 rounded-md shadow-lg p-2 max-w-3xl"
+                onMouseOver={() => setIsSticky(true)}
+                onMouseOut={() => setIsSticky(false)}
+            >
+                {symbolInfo.isSymbolDefinitionsLoading ? (
+                    <div className="flex flex-row items-center gap-2 text-sm">
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        Loading...
+                    </div>
+                ) : symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 0 ? (
+                    <SymbolDefinitionPreview
+                        symbolDefinition={symbolInfo.symbolDefinitions[0]}
+                    />
+                ) : (
+                    <p className="text-sm font-medium text-muted-foreground">No hover info found</p>
+                )}
+                <Separator />
+                <div className="flex flex-row gap-2 mt-2">
+                    <LoadingButton
+                        loading={symbolInfo.isSymbolDefinitionsLoading}
+                        disabled={!symbolInfo.symbolDefinitions || symbolInfo.symbolDefinitions.length === 0}
+                        variant="outline"
+                        size="sm"
+                        onClick={onGotoDefinition}
+                    >
+                        {
+                            !symbolInfo.isSymbolDefinitionsLoading && (!symbolInfo.symbolDefinitions || symbolInfo.symbolDefinitions.length === 0) ?
+                                "No definition found" :
+                                `Go to ${symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 1 ? "definitions" : "definition"}`
+                        }
+                    </LoadingButton>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onFindReferences(symbolInfo.symbolName)}
+                    >
+                        Find references
+                    </Button>
                 </div>
-            ) : symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 0 ? (
-                <SymbolDefinitionPreview
-                    symbolDefinition={symbolInfo.symbolDefinitions[0]}
-                />
-            ) : (
-                <p className="text-sm font-medium text-muted-foreground">No hover info found</p>
-            )}
-            <Separator />
-            <div className="flex flex-row gap-2 mt-2">
-                <LoadingButton
-                    loading={symbolInfo.isSymbolDefinitionsLoading}
-                    disabled={!symbolInfo.symbolDefinitions || symbolInfo.symbolDefinitions.length === 0}
-                    variant="outline"
-                    size="sm"
-                    onClick={onGotoDefinition}
-                >
-                    {
-                        !symbolInfo.isSymbolDefinitionsLoading && (!symbolInfo.symbolDefinitions || symbolInfo.symbolDefinitions.length === 0) ?
-                            "No definition found" :
-                            `Go to ${symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 1 ? "definitions" : "definition"}`
-                    }
-                </LoadingButton>
-                <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => onFindReferences(symbolInfo.symbolName)}
-                >
-                    Find references
-                </Button>
-            </div>
         </div>
     ) : null;
 };