diff --git a/src/renderer/src/components/CodeBlockView/HtmlArtifactsCard.tsx b/src/renderer/src/components/CodeBlockView/HtmlArtifactsCard.tsx
index 3a82db90fa..acb4a9c4f1 100644
--- a/src/renderer/src/components/CodeBlockView/HtmlArtifactsCard.tsx
+++ b/src/renderer/src/components/CodeBlockView/HtmlArtifactsCard.tsx
@@ -157,6 +157,7 @@ const IconWrapper = styled.div<{ $isStreaming: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   width: 44px;
   height: 44px;
   background: ${(props) =>
@@ -177,13 +178,16 @@ const TitleSection = styled.div`
   gap: 6px;
 `
 
-const Title = styled.h3`
-  margin: 0 !important;
-  font-size: 14px !important;
-  font-weight: 600;
-  color: var(--color-text);
+const Title = styled.span`
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--color-text-1);
   line-height: 1.4;
   font-family: 'Ubuntu';
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 `
 
 const TypeBadge = styled.div`
diff --git a/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx b/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx
index a548d5e163..216e247701 100644
--- a/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx
+++ b/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx
@@ -1,7 +1,7 @@
 import CodeEditor, { CodeEditorHandles } from '@renderer/components/CodeEditor'
 import { isLinux, isMac, isWin } from '@renderer/config/constant'
 import { classNames } from '@renderer/utils'
-import { Button, Modal, Splitter, Tooltip } from 'antd'
+import { Button, Modal, Splitter, Tooltip, Typography } from 'antd'
 import { Code, Eye, Maximize2, Minimize2, SaveIcon, SquareSplitHorizontal, X } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -43,7 +43,7 @@ const HtmlArtifactsPopup: React.FC<HtmlArtifactsPopupProps> = ({ open, title, ht
   const renderHeader = () => (
     <ModalHeader onDoubleClick={() => setIsFullscreen(!isFullscreen)} className={classNames({ drag: isFullscreen })}>
       <HeaderLeft $isFullscreen={isFullscreen}>
-        <TitleText>{title}</TitleText>
+        <TitleText ellipsis={{ tooltip: true }}>{title}</TitleText>
       </HeaderLeft>
 
       <HeaderCenter>
@@ -266,13 +266,13 @@ const HeaderRight = styled.div<{ $isFullscreen?: boolean }>`
   padding-right: ${({ $isFullscreen }) => ($isFullscreen ? (isWin ? '136px' : isLinux ? '120px' : '12px') : '12px')};
 `
 
-const TitleText = styled.span`
+const TitleText = styled(Typography.Text)`
   font-size: 16px;
-  font-weight: 600;
+  font-weight: bold;
   color: var(--color-text);
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  width: 50%;
 `
 
 const ViewControls = styled.div`
diff --git a/src/renderer/src/components/Tab/TabContainer.tsx b/src/renderer/src/components/Tab/TabContainer.tsx
index e3fd8291d3..b8065ed40e 100644
--- a/src/renderer/src/components/Tab/TabContainer.tsx
+++ b/src/renderer/src/components/Tab/TabContainer.tsx
@@ -209,7 +209,7 @@ const TabsBar = styled.div<{ $isFullscreen: boolean }>`
   height: var(--navbar-height);
   position: relative;
   -webkit-app-region: drag;
-  
+
   /* 确保交互元素在拖拽区域之上 */
   > * {
     position: relative;