vrr/Pulse
2
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-05-19 16:27:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add hover titles to truncated table cells

Browse source 
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.
This commit is contained in:
rcourtman 2026-05-09 22:49:27 +01:00
parent 3266056ca5
commit 1ca4ecccb6
2 changed files with 14 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
View file

@ -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>

10
frontend-modern/src/features/alerts/AlertHistoryTableAlertRow.tsx
View file

@ -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>