From 4d7aa45c6754f7a44aa27d715dc1087028e704ce Mon Sep 17 00:00:00 2001
From: PostHog Code <code@posthog.com>
Date: Tue, 21 Apr 2026 17:19:16 +0000
Subject: [PATCH] feat(sidebar): show full label in tooltip when truncated

Sidebar items (including task names) truncate long labels with an ellipsis.
Show the full label in a tooltip on hover when, and only when, the label
is actually overflowing. Follows the existing pattern used in
Combobox.tsx.

Generated-By: PostHog Code
Task-Id: 6339d494-8d63-4b68-927e-e97318d257e6
---
 .../sidebar/components/SidebarItem.tsx        | 40 +++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/apps/code/src/renderer/features/sidebar/components/SidebarItem.tsx b/apps/code/src/renderer/features/sidebar/components/SidebarItem.tsx
index fb1d79088..af10a1938 100644
--- a/apps/code/src/renderer/features/sidebar/components/SidebarItem.tsx
+++ b/apps/code/src/renderer/features/sidebar/components/SidebarItem.tsx
@@ -1,4 +1,6 @@
+import { Tooltip } from "@components/ui/Tooltip";
 import { Button, cn } from "@posthog/quill";
+import { useCallback, useRef, useState } from "react";
 import type { SidebarItemAction } from "../types";
 
 const INDENT_SIZE = 8;
@@ -34,6 +36,34 @@ export function SidebarItem({
   endContent,
   disabled,
 }: SidebarItemProps) {
+  const labelRef = useRef<HTMLSpanElement>(null);
+  const [showLabelTooltip, setShowLabelTooltip] = useState(false);
+  const canShowLabelTooltip =
+    typeof label === "string" || typeof label === "number";
+
+  const handleLabelMouseEnter = useCallback(() => {
+    const el = labelRef.current;
+    if (el && el.scrollWidth > el.clientWidth) {
+      setShowLabelTooltip(true);
+    }
+  }, []);
+
+  const handleLabelMouseLeave = useCallback(() => {
+    setShowLabelTooltip(false);
+  }, []);
+
+  const labelSpan = (
+    // biome-ignore lint/a11y/noStaticElementInteractions: hover handlers only drive a visual tooltip for truncated labels
+    <span
+      ref={labelRef}
+      className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
+      onMouseEnter={canShowLabelTooltip ? handleLabelMouseEnter : undefined}
+      onMouseLeave={canShowLabelTooltip ? handleLabelMouseLeave : undefined}
+    >
+      {label}
+    </span>
+  );
+
   return (
     <Button
       type="button"
@@ -55,9 +85,13 @@ export function SidebarItem({
       {icon ? <span className="flex shrink-0 items-center">{icon}</span> : null}
       <span className="flex min-w-0 flex-1 flex-col overflow-hidden">
         <span className="flex items-center gap-1" style={{ height: "18px" }}>
-          <span className="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
-            {label}
-          </span>
+          {canShowLabelTooltip ? (
+            <Tooltip content={label} open={showLabelTooltip} side="top">
+              {labelSpan}
+            </Tooltip>
+          ) : (
+            labelSpan
+          )}
           {endContent}
         </span>
         {subtitle && (