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} ) : null}
{props.hasMoreMessages && !props.isLoadingMessages ? ( {props.hasMoreMessages && !props.isLoadingMessages ? (
<div className="mb-3"> <div className="py-1 mb-2">
<Button <div className="mx-auto w-fit">
variant="secondary" <Button
size="sm" variant="outline"
onClick={handleLoadMore} size="sm"
disabled={props.isLoadingMoreMessages || props.isLoadingMessages} onClick={handleLoadMore}
aria-busy={props.isLoadingMoreMessages} disabled={props.isLoadingMoreMessages || props.isLoadingMessages}
className="gap-2" aria-busy={props.isLoadingMoreMessages}
> className="gap-1.5 text-xs opacity-80 hover:opacity-100"
{props.isLoadingMoreMessages ? ( >
<> {props.isLoadingMoreMessages ? (
<Spinner size="sm" label={null} className="text-current" /> <>
Loading… <Spinner size="sm" label={null} className="text-current" />
</> Loading…
) : ( </>
'Load older' ) : (
)} <>
</Button> <span aria-hidden="true">↑</span>
Load older
</>
)}
</Button>
</div>
</div> </div>
) : null} ) : null}