From 6d01759c84b4d87c514ba659f6a0fd380e58d7a6 Mon Sep 17 00:00:00 2001
From: cjh <1054535289@qq.com>
Date: Fri, 14 Nov 2025 19:55:56 +0800
Subject: [PATCH] feat: improve toolbar responsiveness and UI layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add responsive toolbar with container query (hide elements at ≤340px)
- Remove unnecessary padding for better message alignment
- Improve assistant message dot visibility with adaptive color
- Update .gitignore to exclude .cursor directory
---
 .gitignore                                          |  2 ++
 src/webview/src/components/ButtonArea.vue           |  4 ++++
 .../src/components/Messages/AssistantMessage.vue    |  2 +-
 .../blocks/tools/common/ToolMessageWrapper.vue      |  2 +-
 src/webview/src/components/TokenIndicator.vue       |  2 +-
 src/webview/src/styles/claude-theme.css             | 13 +++++++++++++
 6 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index dd3e8e8..678a4da 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,8 @@
 !.vscode/launch.json
 !.vscode/tasks.json
 .idea/
+.cursor
+
 
 # OS
 .DS_Store
diff --git a/src/webview/src/components/ButtonArea.vue b/src/webview/src/components/ButtonArea.vue
index 9d0e182..7f895b9 100644
--- a/src/webview/src/components/ButtonArea.vue
+++ b/src/webview/src/components/ButtonArea.vue
@@ -28,6 +28,7 @@
         <button
           class="action-button think-button"
           :class="{ 'thinking-active': isThinkingOn }"
+          data-responsive="hide-small"
           @click="handleThinkingToggle"
           :aria-label="isThinkingOn ? 'Thinking on' : 'Thinking off'"
           :title="isThinkingOn ? 'Thinking on' : 'Thinking off'"
@@ -51,6 +52,7 @@
           <template #trigger>
             <button
               class="action-button"
+              data-responsive="hide-small"
               aria-label="Slash Commands"
             >
               <span class="codicon codicon-italic text-[16px]!" />
@@ -397,6 +399,8 @@ function handleMentionKeydown(event: KeyboardEvent) {
   flex-shrink: 0;
   cursor: auto;
   width: 100%;
+  container-type: inline-size;
+  container-name: toolbar;
 }
 
 .button-row {
diff --git a/src/webview/src/components/Messages/AssistantMessage.vue b/src/webview/src/components/Messages/AssistantMessage.vue
index a8c7166..5e89e5b 100644
--- a/src/webview/src/components/Messages/AssistantMessage.vue
+++ b/src/webview/src/components/Messages/AssistantMessage.vue
@@ -64,7 +64,7 @@ const messageClasses = computed(() => {
   left: 8px;
   padding-top: 2px;
   font-size: 10px;
-  color: var(--vscode-input-border);
+  color: color-mix(in srgb, var(--vscode-foreground) 60%, transparent);
   z-index: 1;
 }
 </style>
diff --git a/src/webview/src/components/Messages/blocks/tools/common/ToolMessageWrapper.vue b/src/webview/src/components/Messages/blocks/tools/common/ToolMessageWrapper.vue
index 0b4e8a7..339394b 100644
--- a/src/webview/src/components/Messages/blocks/tools/common/ToolMessageWrapper.vue
+++ b/src/webview/src/components/Messages/blocks/tools/common/ToolMessageWrapper.vue
@@ -136,7 +136,7 @@ function toggleExpand() {
 .tool-message-wrapper {
   display: flex;
   flex-direction: column;
-  padding: 0px 8px;
+  padding: 0px;
 }
 
 .main-line {
diff --git a/src/webview/src/components/TokenIndicator.vue b/src/webview/src/components/TokenIndicator.vue
index 07c9c58..2a4d97d 100644
--- a/src/webview/src/components/TokenIndicator.vue
+++ b/src/webview/src/components/TokenIndicator.vue
@@ -3,7 +3,7 @@
     class="progress-container"
     :style="containerStyle"
   >
-    <span class="progress-text">{{ formattedPercentage }}</span>
+    <span class="progress-text" data-responsive="hide-small">{{ formattedPercentage }}</span>
     <div class="progress-circle">
       <svg width="14" height="14" class="progress-svg">
         <circle
diff --git a/src/webview/src/styles/claude-theme.css b/src/webview/src/styles/claude-theme.css
index d599da7..4912c82 100644
--- a/src/webview/src/styles/claude-theme.css
+++ b/src/webview/src/styles/claude-theme.css
@@ -74,6 +74,12 @@ html {
   --app-link-color: var(--vscode-textLink-foreground);
 }
 
+/* Reset body */
+body {
+  margin: 0;
+  padding: 0;
+}
+
 /* Light 主题调整 */
 .vscode-light {
   --app-transparent-inner-border: rgba(0, 0, 0, 0.07);
@@ -506,6 +512,13 @@ html {
   gap: 4px;
 }
 
+/* 工具栏容器查询：宽度 ≤ 340px 时隐藏标记为 hide-small 的元素 */
+@container toolbar (max-width: 340px) {
+  [data-responsive="hide-small"] {
+    display: none !important;
+  }
+}
+
 
 /* 文件图标特殊样式 */
 .show-file-icons {