Add hover titles to more truncated user-data fields

Continuing the truncate-cell tooltip pass:

  - Recovery history breadcrumb: the selected-item label (e.g. an
    LXC name) used `truncate` without a title, so a long name
    couldn't be read once it overflowed the breadcrumb container.
  - Resource picker rows: both the display name and the resource id
    were truncated without a title, so users picking from a long
    list of resources couldn't read the full identifiers when they
    overflowed.
  - Suggest profile modal: each saved-suggestion row showed a
    truncated prompt with no way to recover the full text.

Add `title` attributes mirroring the visible content on each so
hovering exposes the full string.
This commit is contained in:
rcourtman
2026-05-09 23:05:54 +01:00
parent eeb2975d22
commit 5ecac35e6f
3 changed files with 12 additions and 4 deletions
@@ -332,7 +332,10 @@ export const RecoveryHistorySection: Component<RecoveryHistorySectionProps> = (p
All events All events
</button> </button>
<span class="text-muted">/</span> <span class="text-muted">/</span>
<span class="min-w-0 truncate font-medium text-base-content"> <span
class="min-w-0 truncate font-medium text-base-content"
title={props.selectedHistoryItemLabel()}
>
{props.selectedHistoryItemLabel()} {props.selectedHistoryItemLabel()}
</span> </span>
</div> </div>
@@ -252,10 +252,13 @@ export function ResourcePicker(props: ResourcePickerProps) {
{/* Name and ID */} {/* Name and ID */}
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="text-sm text-white sm:truncate break-words"> <div
class="text-sm text-white sm:truncate break-words"
title={getPreferredInfrastructureDisplayName(resource)}
>
{getPreferredInfrastructureDisplayName(resource)} {getPreferredInfrastructureDisplayName(resource)}
</div> </div>
<div class="text-xs text-slate-500 sm:truncate break-all"> <div class="text-xs text-slate-500 sm:truncate break-all" title={resource.id}>
{resource.id} {resource.id}
</div> </div>
<div class="mt-1 flex flex-wrap items-center gap-1 sm:hidden"> <div class="mt-1 flex flex-wrap items-center gap-1 sm:hidden">
@@ -558,7 +558,9 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
{formatRelativeTime(item.createdAt)} {formatRelativeTime(item.createdAt)}
</span> </span>
</div> </div>
<p class="text-xs text-muted mt-1 truncate">{item.prompt}</p> <p class="text-xs text-muted mt-1 truncate" title={item.prompt}>
{item.prompt}
</p>
</button> </button>
)} )}
</For> </For>