🎨 style: Fix Footer Centering

This commit is contained in:
Danny Avila 2025-04-01 04:07:01 -04:00
parent 90b8769ef3
commit 9b6fa89622
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
2 changed files with 32 additions and 25 deletions

View file

@ -71,14 +71,16 @@ function ChatView({ index = 0 }: { index?: number }) {
{!isLoading && <Header />} {!isLoading && <Header />}
{isLandingPage ? ( {isLandingPage ? (
<div className="flex flex-1 flex-col items-center justify-end sm:justify-center"> <>
{content} <div className="flex flex-1 flex-col items-center justify-end sm:justify-center">
<div className="w-full max-w-3xl transition-all duration-200 xl:max-w-4xl"> {content}
<ChatForm index={index} /> <div className="w-full max-w-3xl transition-all duration-200 xl:max-w-4xl">
<ConversationStarters /> <ChatForm index={index} />
<Footer /> <ConversationStarters />
</div>
</div> </div>
</div> <Footer />
</>
) : ( ) : (
<div className="flex h-full flex-col overflow-y-auto"> <div className="flex h-full flex-col overflow-y-auto">
{content} {content}

View file

@ -83,24 +83,29 @@ export default function Footer({ className }: { className?: string }) {
); );
return ( return (
<div <div className="relative w-full">
className={ <div
className ?? className={
'absolute bottom-0 left-0 right-0 hidden items-center justify-center gap-2 px-2 py-2 text-center text-xs text-text-primary sm:flex md:px-[60px]' className ??
} 'absolute bottom-0 left-0 right-0 hidden items-center justify-center gap-2 px-2 py-2 text-center text-xs text-text-primary sm:flex md:px-[60px]'
role="contentinfo" }
> role="contentinfo"
{footerElements.map((contentRender, index) => { >
const isLastElement = index === footerElements.length - 1; {footerElements.map((contentRender, index) => {
return ( const isLastElement = index === footerElements.length - 1;
<React.Fragment key={`footer-element-${index}`}> return (
{contentRender} <React.Fragment key={`footer-element-${index}`}>
{!isLastElement && ( {contentRender}
<div key={`separator-${index}`} className="h-2 border-r-[1px] border-border-medium" /> {!isLastElement && (
)} <div
</React.Fragment> key={`separator-${index}`}
); className="h-2 border-r-[1px] border-border-medium"
})} />
)}
</React.Fragment>
);
})}
</div>
</div> </div>
); );
} }