Skip to content

Commit

Permalink
fix(ui): resolve tooltip text overflow issue (#3891)
Browse files Browse the repository at this point in the history
  • Loading branch information
liangfung authored Feb 22, 2025
1 parent 5242425 commit 86cd7bd
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 33 deletions.
52 changes: 27 additions & 25 deletions ee/tabby-ui/app/search/components/reading-code-step.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -281,33 +281,35 @@ function CodeContextItem({
) : null}
</div>
</TooltipTrigger>
<TooltipContent align="start" sideOffset={8}>
<div className="whitespace-nowrap">
<span>{fileName}</span>
{rangeText ? (
<span className="text-muted-foreground">:{rangeText}</span>
) : null}
<span className="ml-2 text-xs text-muted-foreground">{path}</span>
</div>
{enableDeveloperMode && context?.extra?.scores && (
<div className="mt-4">
<div className="mb-1 font-semibold">Scores</div>
<div className="space-y-1">
<div className="flex">
<span className="w-20">rrf:</span>
{scores?.rrf ?? '-'}
</div>
<div className="flex">
<span className="w-20">bm25:</span>
{scores?.bm25 ?? '-'}
</div>
<div className="flex">
<span className="w-20">embedding:</span>
{scores?.embedding ?? '-'}
<TooltipContent align="start" sideOffset={8} className="max-w-[24rem]">
<div className="space-y-2">
<div className="whitespace-nowrap font-medium">
<span>{fileName}</span>
{rangeText ? (
<span className="text-muted-foreground">:{rangeText}</span>
) : null}
</div>
<div className="break-all text-xs text-muted-foreground">{path}</div>
{enableDeveloperMode && context?.extra?.scores && (
<div className="mt-4">
<div className="mb-1 font-semibold">Scores</div>
<div className="space-y-1">
<div className="flex">
<span className="w-20">rrf:</span>
{scores?.rrf ?? '-'}
</div>
<div className="flex">
<span className="w-20">bm25:</span>
{scores?.bm25 ?? '-'}
</div>
<div className="flex">
<span className="w-20">embedding:</span>
{scores?.embedding ?? '-'}
</div>
</div>
</div>
</div>
)}
)}
</div>
</TooltipContent>
</Tooltip>
)
Expand Down
23 changes: 15 additions & 8 deletions ee/tabby-ui/components/message-markdown/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -595,7 +595,7 @@ function RelevantCodeBadge({
<HoverCard openDelay={100} closeDelay={100}>
<HoverCardTrigger>
<span
className="relative -top-2 mr-0.5 inline-block h-4 w-4 cursor-pointer rounded-full bg-muted text-center text-xs font-medium"
className="relative -top-2 mx-0.5 inline-block h-4 w-4 cursor-pointer rounded-full bg-muted text-center text-xs font-medium"
onClick={() => {
onCodeCitationClick?.(relevantCode)
}}
Expand All @@ -609,17 +609,24 @@ function RelevantCodeBadge({
{citationIndex}
</span>
</HoverCardTrigger>
<HoverCardContent className="w-auto bg-background text-sm text-foreground dark:border-muted-foreground/60 lg:w-96">
<HoverCardContent
className="max-w-[90vw] overflow-x-hidden bg-background py-2 text-sm text-foreground dark:border-muted-foreground/60 md:py-4 lg:w-96"
collisionPadding={8}
>
<div
className="cursor-pointer space-y-2 whitespace-nowrap hover:opacity-70"
className="cursor-pointer space-y-2 hover:opacity-70"
onClick={() => onCodeCitationClick?.(relevantCode)}
>
<span>{fileName}</span>
{rangeText ? (
<span className="text-muted-foreground">:{rangeText}</span>
) : null}
<div className="truncate whitespace-nowrap font-medium">
<span>{fileName}</span>
{rangeText ? (
<span className="text-muted-foreground">:{rangeText}</span>
) : null}
</div>
{!!path && (
<div className="text-xs text-muted-foreground">{path}</div>
<div className="break-all text-xs text-muted-foreground">
{path}
</div>
)}
</div>
</HoverCardContent>
Expand Down

0 comments on commit 86cd7bd

Please sign in to comment.