From b1e74e57327446af0386384fc38a80c299521d15 Mon Sep 17 00:00:00 2001
From: yiliang114 <1204183885@qq.com>
Date: Sun, 30 Nov 2025 21:27:55 +0800
Subject: [PATCH] style(vscode-ide-companion): optimize header & message style

---
 packages/vscode-ide-companion/src/webview/App.tsx             | 2 +-
 .../src/webview/components/layouts/ChatHeader.tsx             | 4 ++--
 .../src/webview/components/messages/StreamingMessage.tsx      | 2 +-
 .../src/webview/components/messages/UserMessage.tsx           | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/vscode-ide-companion/src/webview/App.tsx b/packages/vscode-ide-companion/src/webview/App.tsx
index 41e66915..8186ceb7 100644
--- a/packages/vscode-ide-companion/src/webview/App.tsx
+++ b/packages/vscode-ide-companion/src/webview/App.tsx
@@ -399,7 +399,7 @@ export const App: React.FC = () => {
 
       <div
         ref={messagesContainerRef}
-        className="flex-1 overflow-y-auto overflow-x-hidden pt-5 pr-5 pl-5 pb-[120px] flex flex-col relative min-w-0 focus:outline-none [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-thumb]:rounded-sm [&::-webkit-scrollbar-thumb:hover]:bg-white/30 [&>*]:flex [&>*]:gap-0 [&>*]:items-start [&>*]:text-left [&>*]:py-2 [&>.message-item]:px-0 [&>*]:flex-col [&>*]:relative [&>*]:animate-[fadeIn_0.2s_ease-in]"
+        className="flex-1 overflow-y-auto overflow-x-hidden pt-5 pr-5 pl-5 pb-[120px] flex flex-col relative min-w-0 focus:outline-none [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-white/20 [&::-webkit-scrollbar-thumb]:rounded-sm [&::-webkit-scrollbar-thumb:hover]:bg-white/30 [&>*]:flex [&>*]:gap-0 [&>*]:items-start [&>*]:text-left [&>*]:py-2 [&>.message-item]:px-0 [&>.message-item]:py-0 [&>*]:flex-col [&>*]:relative [&>*]:animate-[fadeIn_0.2s_ease-in]"
         style={{ backgroundColor: 'var(--app-primary-background)' }}
       >
         {!hasContent ? (
diff --git a/packages/vscode-ide-companion/src/webview/components/layouts/ChatHeader.tsx b/packages/vscode-ide-companion/src/webview/components/layouts/ChatHeader.tsx
index 6cb3f62e..086e7e08 100644
--- a/packages/vscode-ide-companion/src/webview/components/layouts/ChatHeader.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/layouts/ChatHeader.tsx
@@ -29,7 +29,7 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
       onClick={onLoadSessions}
       title="Past conversations"
     >
-      <span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
+      <span className="whitespace-nowrap overflow-hidden text-ellipsis min-w-0 mr-1">
         {currentSessionTitle}
       </span>
       <ChevronDownIcon className="w-4 h-4 flex-shrink-0 ml-1" />
@@ -38,7 +38,7 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
     <div className="flex-1 min-w-2"></div>
 
     <button
-      className="btn-ghost btn-sm flex items-center justify-center outline-none rounded hover:bg-[var(--app-ghost-button-hover-background)] h-6 leading-6 w-6"
+      className="btn-ghost btn-sm flex items-center justify-center outline-none rounded hover:bg-[var(--app-ghost-button-hover-background)] p-1 leading-6"
       onClick={onNewSession}
       title="New Session"
     >
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/StreamingMessage.tsx b/packages/vscode-ide-companion/src/webview/components/messages/StreamingMessage.tsx
index e35ba2fa..ac61ee0a 100644
--- a/packages/vscode-ide-companion/src/webview/components/messages/StreamingMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/StreamingMessage.tsx
@@ -16,7 +16,7 @@ export const StreamingMessage: React.FC<StreamingMessageProps> = ({
   content,
   onFileClick,
 }) => (
-  <div className="flex gap-0 items-start text-left py-2 flex-col relative animate-[fadeIn_0.2s_ease-in]">
+  <div className="flex gap-0 items-start text-left flex-col relative animate-[fadeIn_0.2s_ease-in]">
     <div
       className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
       style={{
diff --git a/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx b/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
index 5a9d777e..af9435b0 100644
--- a/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
+++ b/packages/vscode-ide-companion/src/webview/components/messages/UserMessage.tsx
@@ -44,9 +44,9 @@ export const UserMessage: React.FC<UserMessageProps> = ({
   const fileContextDisplay = getFileContextDisplay();
 
   return (
-    <div className="flex gap-0 items-start text-left py-2 flex-col relative animate-[fadeIn_0.2s_ease-in]">
+    <div className="flex gap-0 items-start text-left flex-col relative animate-[fadeIn_0.2s_ease-in]">
       <div
-        className="inline-block my-1 relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
+        className="inline-block relative whitespace-pre-wrap rounded-md max-w-full overflow-x-auto overflow-y-hidden select-text leading-[1.5]"
         style={{
           border: '1px solid var(--app-input-border)',
           borderRadius: 'var(--corner-radius-medium)',