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

Author: msukkari

CHANGELOG.md

@@ -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)
 

packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx

@@ -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>
-            <div className="px-2 py-0.5 bg-accent text-sm rounded-md">
+            <div className="px-2 py-0.5 bg-accent text-sm rounded-md flex-shrink-0">
                 {countText}
             </div>
         </div>