From e0f02214535079b9995e3d47de86accd11158b8d Mon Sep 17 00:00:00 2001
From: weishu <twsxtd@gmail.com>
Date: Wed, 24 Dec 2025 18:15:18 +0800
Subject: [PATCH] fix: improve "Load older" button styling and alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Centered button using mx-auto w-fit wrapper (matches SystemMessage pattern)
- Changed variant from secondary to outline for subtler appearance
- Reduced visual weight with text-xs opacity-80 hover:opacity-100
- Added ↑ arrow icon before the text
- Adjusted spacing to py-1 mb-2 and gap-1.5

Fixes alignment issues where button wasn't centered with content below and improves visual consistency with page design.
---
 .../components/AssistantChat/HappyThread.tsx  | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/web/src/components/AssistantChat/HappyThread.tsx b/web/src/components/AssistantChat/HappyThread.tsx
index 7589397f..e267d48d 100644
--- a/web/src/components/AssistantChat/HappyThread.tsx
+++ b/web/src/components/AssistantChat/HappyThread.tsx
@@ -267,24 +267,29 @@ export function HappyThread(props: {
                                     ) : null}
 
                                     {props.hasMoreMessages && !props.isLoadingMessages ? (
-                                        <div className="mb-3">
-                                            <Button
-                                                variant="secondary"
-                                                size="sm"
-                                                onClick={handleLoadMore}
-                                                disabled={props.isLoadingMoreMessages || props.isLoadingMessages}
-                                                aria-busy={props.isLoadingMoreMessages}
-                                                className="gap-2"
-                                            >
-                                                {props.isLoadingMoreMessages ? (
-                                                    <>
-                                                        <Spinner size="sm" label={null} className="text-current" />
-                                                        Loading…
-                                                    </>
-                                                ) : (
-                                                    'Load older'
-                                                )}
-                                            </Button>
+                                        <div className="py-1 mb-2">
+                                            <div className="mx-auto w-fit">
+                                                <Button
+                                                    variant="outline"
+                                                    size="sm"
+                                                    onClick={handleLoadMore}
+                                                    disabled={props.isLoadingMoreMessages || props.isLoadingMessages}
+                                                    aria-busy={props.isLoadingMoreMessages}
+                                                    className="gap-1.5 text-xs opacity-80 hover:opacity-100"
+                                                >
+                                                    {props.isLoadingMoreMessages ? (
+                                                        <>
+                                                            <Spinner size="sm" label={null} className="text-current" />
+                                                            Loading…
+                                                        </>
+                                                    ) : (
+                                                        <>
+                                                            <span aria-hidden="true">↑</span>
+                                                            Load older
+                                                        </>
+                                                    )}
+                                                </Button>
+                                            </div>
                                         </div>
                                     ) : null}