From 1ca4ecccb6eea9bf1c0f6a2d5689b45125f76163 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sat, 9 May 2026 22:49:27 +0100
Subject: [PATCH] Add hover titles to truncated table cells
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Several truncated cells with no title attribute meant the user couldn't
read the full value when it overflowed:

  - Alert History → Resource column: "Tower - Unraid Array" became
    "Tower - Unraid A..." with no way to read the rest.
  - Alert History → Node column (visible at lg+): same.
  - Configured Node Tables (Settings → Infrastructure): node name and
    host fields used `truncate` without title, so long endpoints
    couldn't be read.

Add `title` attributes that mirror the cell contents so hovering shows
the full string. The Message column already had this pattern via
title={props.alert.description}; this commit applies the same shape
to the Resource and Node columns and to the configured-node fields.
---
 .../src/components/Settings/ConfiguredNodeTables.tsx | 12 ++++++------
 .../features/alerts/AlertHistoryTableAlertRow.tsx    | 10 ++++++++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
index 7b5a2ad61..e563cd8aa 100644
--- a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
+++ b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
@@ -87,8 +87,8 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
                           class="mt-1.5"
                         />
                         <div class="min-w-0 flex-1">
-                          <p class="font-medium text-base-content truncate">{node.name}</p>
-                          <p class="text-xs text-muted truncate">{node.host}</p>
+                          <p class="font-medium text-base-content truncate" title={node.name}>{node.name}</p>
+                          <p class="text-xs text-muted truncate" title={node.host}>{node.host}</p>
                         </div>
                       </div>
                       <Show when={node.type === 'pve' && 'isCluster' in node && node.isCluster}>
@@ -338,8 +338,8 @@ export const PbsNodesTable: Component<PbsNodesTableProps> = (props) => {
                           class="mt-1.5"
                         />
                         <div class="min-w-0 flex-1">
-                          <p class="font-medium text-base-content truncate">{node.name}</p>
-                          <p class="text-xs text-muted truncate">{node.host}</p>
+                          <p class="font-medium text-base-content truncate" title={node.name}>{node.name}</p>
+                          <p class="text-xs text-muted truncate" title={node.host}>{node.host}</p>
                         </div>
                       </div>
                     </div>
@@ -500,8 +500,8 @@ export const PmgNodesTable: Component<PmgNodesTableProps> = (props) => {
                           class="mt-1.5"
                         />
                         <div class="min-w-0 flex-1">
-                          <p class="font-medium text-base-content truncate">{node.name}</p>
-                          <p class="text-xs text-muted truncate">{node.host}</p>
+                          <p class="font-medium text-base-content truncate" title={node.name}>{node.name}</p>
+                          <p class="text-xs text-muted truncate" title={node.host}>{node.host}</p>
                         </div>
                       </div>
                     </div>
diff --git a/frontend-modern/src/features/alerts/AlertHistoryTableAlertRow.tsx b/frontend-modern/src/features/alerts/AlertHistoryTableAlertRow.tsx
index 4083ad000..6ae51ad6d 100644
--- a/frontend-modern/src/features/alerts/AlertHistoryTableAlertRow.tsx
+++ b/frontend-modern/src/features/alerts/AlertHistoryTableAlertRow.tsx
@@ -43,7 +43,10 @@ export function AlertHistoryTableAlertRow(props: AlertHistoryTableAlertRowProps)
           <span class={sourcePresentation().className}>{sourcePresentation().label}</span>
         </TableCell>
 
-        <TableCell class="max-w-[150px] truncate p-1 px-1 font-medium text-base-content sm:p-1.5 sm:px-2">
+        <TableCell
+          class="max-w-[150px] truncate p-1 px-1 font-medium text-base-content sm:p-1.5 sm:px-2"
+          title={props.alert.resourceName}
+        >
           {props.alert.resourceName}
         </TableCell>
 
@@ -76,7 +79,10 @@ export function AlertHistoryTableAlertRow(props: AlertHistoryTableAlertRowProps)
           </span>
         </TableCell>
 
-        <TableCell class="hidden truncate p-1 px-1 text-muted lg:table-cell sm:p-1.5 sm:px-2">
+        <TableCell
+          class="hidden truncate p-1 px-1 text-muted lg:table-cell sm:p-1.5 sm:px-2"
+          title={props.alert.nodeDisplayName || props.alert.node || ''}
+        >
           {props.alert.nodeDisplayName || props.alert.node || '—'}
         </TableCell>