From e8e243ee096a0fb22183170ef3c0005291b72870 Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Fri, 11 Oct 2024 15:22:22 +0800
Subject: [PATCH 1/2] fix: danmuku message ellipsis

---
 src/app/content/components/DanmakuMessage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/content/components/DanmakuMessage.tsx b/src/app/content/components/DanmakuMessage.tsx
index dde5bad..0d42b61 100644
--- a/src/app/content/components/DanmakuMessage.tsx
+++ b/src/app/content/components/DanmakuMessage.tsx
@@ -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-40 overflow-hidden text-ellipsis">{data.body}</div>
+      <div className="max-w-44 overflow-hidden text-ellipsis text-nowrap">{data.body}</div>
     </Button>
   )
 }

From d4e42c68caf8e2e080854f244328c1e519ed6338 Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Fri, 11 Oct 2024 15:50:15 +0800
Subject: [PATCH 2/2] fix: online text overflow

---
 src/app/content/components/DanmakuMessage.tsx |  2 +-
 src/app/content/components/MessageItem.tsx    |  4 +---
 src/app/content/views/Header/index.tsx        | 10 ++++------
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/app/content/components/DanmakuMessage.tsx b/src/app/content/components/DanmakuMessage.tsx
index 0d42b61..0eb6431 100644
--- a/src/app/content/components/DanmakuMessage.tsx
+++ b/src/app/content/components/DanmakuMessage.tsx
@@ -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>
   )
 }
diff --git a/src/app/content/components/MessageItem.tsx b/src/app/content/components/MessageItem.tsx
index f9e8b4e..3d3b2b0 100644
--- a/src/app/content/components/MessageItem.tsx
+++ b/src/app/content/components/MessageItem.tsx
@@ -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>
diff --git a/src/app/content/views/Header/index.tsx b/src/app/content/views/Header/index.tsx
index 9d0d71f..c9f84b2 100644
--- a/src/app/content/views/Header/index.tsx
+++ b/src/app/content/views/Header/index.tsx
@@ -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>