From 5ecac35e6f067669098b1ab7fb42316b136502f7 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 9 May 2026 23:05:54 +0100
Subject: [PATCH] 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.
---
 .../src/components/Recovery/RecoveryHistorySection.tsx     | 5 ++++-
 frontend-modern/src/components/Settings/ResourcePicker.tsx | 7 +++++--
 .../src/components/Settings/SuggestProfileModal.tsx        | 4 +++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend-modern/src/components/Recovery/RecoveryHistorySection.tsx b/frontend-modern/src/components/Recovery/RecoveryHistorySection.tsx
index 6fc0a6c6a..2ee1826de 100644
--- a/frontend-modern/src/components/Recovery/RecoveryHistorySection.tsx
+++ b/frontend-modern/src/components/Recovery/RecoveryHistorySection.tsx
@@ -332,7 +332,10 @@ export const RecoveryHistorySection: Component<RecoveryHistorySectionProps> = (p
               All events
             </button>
             <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()}
             </span>
           </div>
diff --git a/frontend-modern/src/components/Settings/ResourcePicker.tsx b/frontend-modern/src/components/Settings/ResourcePicker.tsx
index 9738ab925..eeac4346e 100644
--- a/frontend-modern/src/components/Settings/ResourcePicker.tsx
+++ b/frontend-modern/src/components/Settings/ResourcePicker.tsx
@@ -252,10 +252,13 @@ export function ResourcePicker(props: ResourcePickerProps) {
 
                       {/* Name and ID */}
                       <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)}
                         </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}
                         </div>
                         <div class="mt-1 flex flex-wrap items-center gap-1 sm:hidden">
diff --git a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
index 1e214d8d1..5c3cc0a38 100644
--- a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
+++ b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
@@ -558,7 +558,9 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
                                 {formatRelativeTime(item.createdAt)}
                               </span>
                             </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>
                         )}
                       </For>