From 909dce0a0bb29bc175b1fbedb91a93074b12bce9 Mon Sep 17 00:00:00 2001
From: hwantage <82494320+hwantage@users.noreply.github.com>
Date: Sat, 24 Oct 2026 16:31:12 +0900
Subject: [PATCH] fix(settings): reveal full shortcut titles on hover (#16806)

* fix(settings): show tooltip for truncated shortcut titles in shortcuts pane

- Wrap shortcut title with Radix Tooltip primitives in ShortcutCommandBlock.
- Enable full title visibility on hover when long command names are truncated.
- Add unit test in ShortcutCommandBlock.test.tsx verifying tooltip trigger attachment.

* fix(settings): show shortcut title tooltip only when the title is truncated

Reuse TruncatedSidebarLabel so untruncated titles keep no tooltip (STYLEGUIDE Tooltips).

---------

Co-authored-by: Neil <4138956+nwparker@users.noreply.github.com>
Co-authored-by: Neil <neil@stably.ai>
---
 .../components/settings/ShortcutCommandBlock.tsx  | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/components/settings/ShortcutCommandBlock.tsx b/src/renderer/src/components/settings/ShortcutCommandBlock.tsx
index dc78718c465..a571fa28e5d 100644
--- a/src/renderer/src/components/settings/ShortcutCommandBlock.tsx
+++ b/src/renderer/src/components/settings/ShortcutCommandBlock.tsx
@@ -10,6 +10,7 @@ import { cn } from '../../lib/utils'
 import { Badge } from '../ui/badge'
 import { Button } from '../ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
+import { TruncatedSidebarLabel } from '../sidebar/truncated-sidebar-label'
 import { SearchableSetting } from './SearchableSetting'
 import { ShortcutBindingSubRow } from './ShortcutBindingSubRow'
 import { ShortcutRecorderButton } from './ShortcutRecorderButton'
@@ -122,14 +123,12 @@ export function ShortcutCommandBlock({
     >
       <div className="flex min-h-9 items-center gap-3 rounded-md px-2 py-1 transition-colors hover:bg-accent/40 focus-within:bg-accent/40">
         <div className="flex min-w-0 flex-1 items-center gap-2">
-          <span
-            className={cn(
-              'truncate text-sm',
-              isDisabled ? 'text-muted-foreground' : 'text-foreground'
-            )}
-          >
-            {item.title}
-          </span>
+          <TruncatedSidebarLabel
+            text={item.title}
+            className={cn('text-sm', isDisabled ? 'text-muted-foreground' : 'text-foreground')}
+            tooltipSide="top"
+            tooltipSideOffset={4}
+          />
           {modified ? (
             <Badge variant="outline" className="shrink-0 text-[11px]">
               {translate('auto.components.settings.ShortcutCommandBlock.287e07ddde', 'Modified')}