beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: online text overflow

Browse source
This commit is contained in:
molvqingtai 2024-10-11 15:50:15 +08:00
parent e8e243ee09
commit d4e42c68ca
3 changed files with 6 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/content/components/DanmakuMessage.tsx
View file

@ -28,7 +28,7 @@ const DanmakuMessage: FC<PromptItemProps> = ({ data, className, onClick, onMouse
<AvatarImage src={data.userAvatar} className="size-full" alt="avatar" />
<AvatarFallback>{data.username.at(0)}</AvatarFallback>
</Avatar>
<div className="max-w-44 overflow-hidden text-ellipsis text-nowrap">{data.body}</div>
<div className="max-w-44 truncate">{data.body}</div>
</Button>
)
}

4
src/app/content/components/MessageItem.tsx
View file

@ -37,9 +37,7 @@ const MessageItem: FC<MessageItemProps> = (props) => {
</Avatar>
<div className="overflow-hidden">
<div className="grid grid-cols-[1fr_auto] items-center gap-x-2 leading-none">
<div className="overflow-hidden text-ellipsis text-sm font-semibold text-slate-600">
{props.data.username}
</div>
<div className="truncate text-sm font-semibold text-slate-600">{props.data.username}</div>
<FormatDate className="text-xs text-slate-400" date={props.data.date}></FormatDate>
</div>
<div>

10
src/app/content/views/Header/index.tsx
View file

@ -24,7 +24,7 @@ const Header: FC = () => {
</Avatar>
<HoverCard>
<HoverCardTrigger asChild>
<Button className="overflow-hidden" variant="link">
<Button className="overflow-hidden p-2" variant="link">
<span className="truncate text-lg font-semibold text-slate-600">
{siteInfo.hostname.replace(/^www\./i, '')}
</span>
@ -49,8 +49,8 @@ const Header: FC = () => {
</HoverCard>
<HoverCard>
<HoverCardTrigger asChild>
<Button className="overflow-hidden" variant="link">
<div className="flex items-center gap-x-1 text-nowrap text-sm text-slate-500">
<Button className="p-0" variant="link">
<div className="flex items-center gap-x-1 text-nowrap text-xs text-slate-500">
<span className="relative flex size-2">
<span
className={cn(
@ -77,9 +77,7 @@ const Header: FC = () => {
<AvatarImage src={user.userAvatar} alt="avatar" />
<AvatarFallback>{user.username.at(0)}</AvatarFallback>
</Avatar>
<div className="flex-1 overflow-hidden text-ellipsis text-nowrap text-sm text-slate-500">
{user.username}
</div>
<div className="flex-1 truncate text-sm text-slate-500">{user.username}</div>
</div>
))}
</ScrollArea>