wushenghua/hapi
1
0
Fork 0
mirror of https://github.com/wu736139669/hapi.git synced 2026-08-07 06:52:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve "Load older" button styling and alignment

Browse Source 
- 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.
This commit is contained in:
weishu
2025-12-24 18:16:26 +08:00
parent d15eafba4c
commit e0f0221453
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/AssistantChat/HappyThread.tsx
+23 -18
View File
@@ -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}