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>
This commit is contained in:
hwantage
2026-10-24 00:31:12 -07:00
committed by GitHub
co-authored by Neil Neil
parent 44c3847f24
commit 909dce0a0b
@@ -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')}