mirror of
https://github.com/infiniflow/ragflow.git
synced 2026-07-04 09:39:32 +08:00
f3aa3381a2
## 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  ## 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
20 lines
551 B
TypeScript
20 lines
551 B
TypeScript
import { useFetchUserInfo } from '@/hooks/use-user-setting-request';
|
|
import { PropsWithChildren } from 'react';
|
|
|
|
export function SharedBadge({ children }: PropsWithChildren) {
|
|
const { data: userInfo } = useFetchUserInfo();
|
|
|
|
if (typeof children === 'string' && userInfo.nickname === children) {
|
|
return null;
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|