Added hover tooltip for long repo names in filter panel (#338)

* handle long repo names better in the UI

* changelog

* clean up hover UI

* cleanup unused logic

* simplify

* remove unused import

* changelog update
This commit is contained in:
Michael Sukkarieh 2025-06-06 13:16:19 -07:00 committed by GitHub
parent 0f3cdb7dd7
commit d29d3fc7f2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 3 deletions

View file

@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added seperate page for signup. [#311](https://github.com/sourcebot-dev/sourcebot/pull/331)
- Fix repo images in authed instance case and add manifest json. [#332](https://github.com/sourcebot-dev/sourcebot/pull/332)
- Added encryption logic for license keys. [#335](https://github.com/sourcebot-dev/sourcebot/pull/335)
- Added hover tooltip for long repo names in filter panel. [#338](https://github.com/sourcebot-dev/sourcebot/pull/338)
- Added repo shard validation on startup. [#339](https://github.com/sourcebot-dev/sourcebot/pull/339)
- Added support for a file explorer when browsing files. [#336](https://github.com/sourcebot-dev/sourcebot/pull/336)

View file

@ -1,5 +1,6 @@
'use client';
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
import clsx from "clsx";
@ -44,13 +45,22 @@ export const Entry = ({
)}
onClick={() => onClicked()}
>
<div className="flex flex-row items-center gap-1 overflow-hidden">
<div className="flex flex-row items-center gap-1 overflow-hidden min-w-0">
{Icon ? Icon : (
<QuestionMarkCircledIcon className="w-4 h-4 flex-shrink-0" />
)}
<p className="overflow-hidden text-ellipsis whitespace-nowrap">{displayName}</p>
<div className="overflow-hidden flex-1 min-w-0">
<Tooltip>
<TooltipTrigger asChild>
<p className="overflow-hidden text-ellipsis whitespace-nowrap truncate-start">{displayName}</p>
</TooltipTrigger>
<TooltipContent side="right" className="max-w-sm">
<p className="font-mono text-sm break-all whitespace-pre-wrap">{displayName}</p>
</TooltipContent>
</Tooltip>
</div>
<div className="px-2 py-0.5 bg-accent text-sm rounded-md">
</div>
<div className="px-2 py-0.5 bg-accent text-sm rounded-md flex-shrink-0">
{countText}
</div>
</div>