From f3aa3381a2d5c2e770e2aeaff4a5f5e96aa9f948 Mon Sep 17 00:00:00 2001
From: Renzo <170978465+RenzoMXD@users.noreply.github.com>
Date: Fri, 27 Mar 2026 02:31:08 +0100
Subject: [PATCH] Fix username line break in SharedBadge component (#13794)

## Summary
- Added Tailwind truncation classes (`inline-block max-w-[120px]
truncate align-middle`) to the username `<span>` in `SharedBadge` to
prevent long usernames from wrapping onto multiple lines
- Added `title` attribute to show the full username on hover when
truncated


![ragflow](https://github.com/user-attachments/assets/8b3d8c03-d605-4957-bcf0-8b4d81fc4e70)


## Test plan
- [x] Verify long usernames display truncated with ellipsis (`...`)
- [x] Verify hovering over a truncated username shows the full name as a
tooltip
- [x] Verify short usernames display normally without truncation

Closes #13748
---
 web/src/components/shared-badge.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/components/shared-badge.tsx b/web/src/components/shared-badge.tsx
index 03625ba675..2d4a5a4166 100644
--- a/web/src/components/shared-badge.tsx
+++ b/web/src/components/shared-badge.tsx
@@ -8,5 +8,12 @@ export function SharedBadge({ children }: PropsWithChildren) {
     return null;
   }
 
-  return <span className="bg-bg-card rounded-sm px-1 text-xs inline-block max-w-[120px] truncate align-middle">{children}</span>;
+  return (
+    <span
+      title={typeof children === 'string' ? children : undefined}
+      className="inline-block max-w-[120px] truncate align-middle bg-bg-card rounded-sm px-1 text-xs"
+    >
+      {children}
+    </span>
+  );
 }