From 2931c891a7b5f2d106eb3cbb0722f9e7206b7669 Mon Sep 17 00:00:00 2001
From: HyaCinth <88471803+HyaCiovo@users.noreply.github.com>
Date: Thu, 7 Aug 2025 14:19:38 +0800
Subject: [PATCH] chore: Optimize component styles and interactions (#23250)
 (#23543)

---
 web/app/components/base/chat/chat/index.tsx                 | 6 +++---
 .../components/workflow/panel/debug-and-preview/index.tsx   | 2 +-
 web/app/components/workflow/shortcuts-name.tsx              | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 16717c53f..bee37cf2c 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -284,9 +284,9 @@ const Chat: FC<ChatProps> = ({
             {
               !noStopResponding && isResponding && (
                 <div className='mb-2 flex justify-center'>
-                  <Button onClick={onStopResponding}>
-                    <StopCircle className='mr-[5px] h-3.5 w-3.5 text-gray-500' />
-                    <span className='text-xs font-normal text-gray-500'>{t('appDebug.operation.stopResponding')}</span>
+                  <Button className='border-components-panel-border bg-components-panel-bg text-components-button-secondary-text' onClick={onStopResponding}>
+                    <StopCircle className='mr-[5px] h-3.5 w-3.5' />
+                    <span className='text-xs font-normal'>{t('appDebug.operation.stopResponding')}</span>
                   </Button>
                 </div>
               )
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index baf4c21dc..ed3f29e87 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -90,7 +90,7 @@ const DebugAndPreview = () => {
       <div
         ref={containerRef}
         className={cn(
-          'relative flex h-full flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg shadow-xl',
+          'relative flex h-full flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-components-panel-bg shadow-xl',
         )}
         style={{ width: `${panelWidth}px` }}
       >
diff --git a/web/app/components/workflow/shortcuts-name.tsx b/web/app/components/workflow/shortcuts-name.tsx
index 8d96bdfe6..e7122c5ad 100644
--- a/web/app/components/workflow/shortcuts-name.tsx
+++ b/web/app/components/workflow/shortcuts-name.tsx
@@ -19,7 +19,7 @@ const ShortcutsName = ({
         keys.map(key => (
           <div
             key={key}
-            className='system-kbd flex h-4 w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize'
+            className='system-kbd flex h-4 min-w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize'
           >
             {getKeyboardKeyNameBySystem(key)}
           </div>