From 9a4135c288b7de571b236fb1ddb3dbf6dd167fe4 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Tue, 17 Mar 2026 17:27:24 -0500
Subject: [PATCH] fix: use proper Tooltip component for sidebar version hover

The native title attribute tooltip was not working reliably. Switched
to the project's Radix-based Tooltip component which provides instant,
styled tooltips on hover.

Fixes PAP-533

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/Layout.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Layout.tsx b/ui/src/components/Layout.tsx
index c60d6880..8bae6920 100644
--- a/ui/src/components/Layout.tsx
+++ b/ui/src/components/Layout.tsx
@@ -32,6 +32,7 @@ import { queryKeys } from "../lib/queryKeys";
 import { cn } from "../lib/utils";
 import { NotFoundPage } from "../pages/NotFound";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 
 const INSTANCE_SETTINGS_MEMORY_KEY = "paperclip.lastInstanceSettingsPath";
 
@@ -298,7 +299,12 @@ export function Layout() {
                   <span className="truncate">Documentation</span>
                 </a>
                 {health?.version && (
-                  <span className="px-2 text-xs text-muted-foreground shrink-0" title={`v${health.version}`}>v</span>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="px-2 text-xs text-muted-foreground shrink-0 cursor-default">v</span>
+                    </TooltipTrigger>
+                    <TooltipContent>v{health.version}</TooltipContent>
+                  </Tooltip>
                 )}
                 <Button variant="ghost" size="icon-sm" className="text-muted-foreground shrink-0" asChild>
                   <Link
@@ -351,7 +357,12 @@ export function Layout() {
                   <span className="truncate">Documentation</span>
                 </a>
                 {health?.version && (
-                  <span className="px-2 text-xs text-muted-foreground shrink-0" title={`v${health.version}`}>v</span>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="px-2 text-xs text-muted-foreground shrink-0 cursor-default">v</span>
+                    </TooltipTrigger>
+                    <TooltipContent>v{health.version}</TooltipContent>
+                  </Tooltip>
                 )}
                 <Button variant="ghost" size="icon-sm" className="text-muted-foreground shrink-0" asChild>
                   <Link