From ec12c97aec5513e2da516d9a2dc2acd48fefa650 Mon Sep 17 00:00:00 2001
From: Ananovo <techotaku39@outlook.com>
Date: Tue, 28 Jul 2026 16:57:31 +0800
Subject: [PATCH] fix(web): align outline close button styling (#1150)

---
 web/src/components/AssistantChat/HappyThread.test.tsx | 4 +++-
 web/src/components/AssistantChat/HappyThread.tsx      | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/components/AssistantChat/HappyThread.test.tsx b/web/src/components/AssistantChat/HappyThread.test.tsx
index 4157ec33..d6da762e 100644
--- a/web/src/components/AssistantChat/HappyThread.test.tsx
+++ b/web/src/components/AssistantChat/HappyThread.test.tsx
@@ -121,7 +121,9 @@ describe('ConversationOutlinePanel', () => {
         const onClose = vi.fn()
         renderPanel({ onClose })
 
-        fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+        const closeButton = screen.getByRole('button', { name: 'Close' })
+        expect(closeButton).toHaveClass('border', 'rounded-md', 'h-9', 'w-9')
+        fireEvent.click(closeButton)
 
         expect(onClose).toHaveBeenCalledTimes(1)
     })
diff --git a/web/src/components/AssistantChat/HappyThread.tsx b/web/src/components/AssistantChat/HappyThread.tsx
index 79603504..9de833c6 100644
--- a/web/src/components/AssistantChat/HappyThread.tsx
+++ b/web/src/components/AssistantChat/HappyThread.tsx
@@ -301,15 +301,16 @@ export function ConversationOutlinePanel(props: {
                             )}
                         </Button>
                     ) : null}
-                    <button
+                    <Button
+                        variant="outline"
                         type="button"
                         onClick={props.onClose}
                         aria-label={t('button.close')}
                         title={t('button.close')}
-                        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--app-link)]"
+                        className="h-9 w-9 shrink-0 px-0"
                     >
                         <CloseIcon className="h-4 w-4" />
-                    </button>
+                    </Button>
                 </div>
                 {normalizedSearchQuery.length > 0 ? (
                     <div className="mt-1.5 text-right text-xs text-[var(--app-hint)]" aria-live="polite">