From 643bc04dd9a99739bea8cd2fa897c1ae41d52d28 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Wed, 21 Jan 2026 19:07:30 +0000
Subject: [PATCH] fix(ui): prevent Agent badge from overlapping uptime column

Add overflow handling to the Name column cell and badges container
to prevent PVE/Agent/cluster badges from overflowing into adjacent
columns on narrower xl screens.

Related to #1141
---
 frontend-modern/src/components/shared/NodeSummaryTable.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index bb14b86e6..7a991c00b 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -490,8 +490,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     onClick={() => props.onNodeClick(nodeId, isPVEItem ? 'pve' : 'pbs')}
                   >
                     {/* Name */}
-                    <td class={`pr-2 py-1 align-middle ${showAlertHighlight() ? 'pl-4' : 'pl-3'}`}>
-                      <div class="flex items-center gap-1.5">
+                    <td class={`pr-2 py-1 align-middle overflow-hidden ${showAlertHighlight() ? 'pl-4' : 'pl-3'}`}>
+                      <div class="flex items-center gap-1.5 min-w-0">
                         <StatusDot
                           variant={statusIndicator().variant}
                           title={statusIndicator().label}
@@ -516,7 +516,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                             ({(node as Node).name})
                           </span>
                         </Show>
-                        <div class="hidden xl:flex items-center gap-1.5 ml-1">
+                        <div class="hidden xl:flex items-center gap-1.5 ml-1 flex-shrink min-w-0 overflow-hidden">
                           <Show when={isPVEItem}>
                             <span class="text-[9px] px-1 py-0 rounded font-medium bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400">
                               PVE