mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-07 06:52:28 +00:00
fix: improve "Load older" button styling and alignment
- 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:
@@ -267,14 +267,15 @@ export function HappyThread(props: {
|
|||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{props.hasMoreMessages && !props.isLoadingMessages ? (
|
{props.hasMoreMessages && !props.isLoadingMessages ? (
|
||||||
<div className="mb-3">
|
<div className="py-1 mb-2">
|
||||||
|
<div className="mx-auto w-fit">
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={handleLoadMore}
|
onClick={handleLoadMore}
|
||||||
disabled={props.isLoadingMoreMessages || props.isLoadingMessages}
|
disabled={props.isLoadingMoreMessages || props.isLoadingMessages}
|
||||||
aria-busy={props.isLoadingMoreMessages}
|
aria-busy={props.isLoadingMoreMessages}
|
||||||
className="gap-2"
|
className="gap-1.5 text-xs opacity-80 hover:opacity-100"
|
||||||
>
|
>
|
||||||
{props.isLoadingMoreMessages ? (
|
{props.isLoadingMoreMessages ? (
|
||||||
<>
|
<>
|
||||||
@@ -282,10 +283,14 @@ export function HappyThread(props: {
|
|||||||
Loading…
|
Loading…
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
'Load older'
|
<>
|
||||||
|
<span aria-hidden="true">↑</span>
|
||||||
|
Load older
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{import.meta.env.DEV && props.normalizedMessagesCount === 0 && props.rawMessagesCount > 0 ? (
|
{import.meta.env.DEV && props.normalizedMessagesCount === 0 && props.rawMessagesCount > 0 ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user