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>