refactor(ui): update component styles for improved consistency; adjust footer and message content rounding, and enhance tab bar padding

This commit is contained in:
Anish Sarkar 2026-04-29 03:55:13 +05:30
parent 65f3916fc3
commit 5374da0092
4 changed files with 5 additions and 5 deletions

View file

@ -126,7 +126,7 @@ const ThreadContent: FC = () => {
</AuiIf> </AuiIf>
<ThreadPrimitive.ViewportFooter <ThreadPrimitive.ViewportFooter
className="aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-main-panel pb-4 md:pb-6" className="aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-2xl bg-main-panel pb-4 md:pb-6"
style={{ paddingBottom: "max(1rem, env(safe-area-inset-bottom))" }} style={{ paddingBottom: "max(1rem, env(safe-area-inset-bottom))" }}
> >
<ThreadScrollToBottom /> <ThreadScrollToBottom />
@ -681,7 +681,7 @@ const Composer: FC = () => {
}, [mentionedDocuments]); }, [mentionedDocuments]);
return ( return (
<ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col gap-2"> <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col gap-2 rounded-2xl">
<ChatSessionStatus <ChatSessionStatus
isAiResponding={isAiResponding} isAiResponding={isAiResponding}
respondingToUserId={respondingToUserId} respondingToUserId={respondingToUserId}

View file

@ -77,7 +77,7 @@ export const UserMessage: FC = () => {
<div className="col-start-2 min-w-0"> <div className="col-start-2 min-w-0">
<div className="aui-user-message-content-wrapper flex items-end gap-2"> <div className="aui-user-message-content-wrapper flex items-end gap-2">
<div className="relative flex-1 min-w-0"> <div className="relative flex-1 min-w-0">
<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground"> <div className="aui-user-message-content wrap-break-word rounded-xl bg-muted px-4 py-2.5 text-foreground">
{mentionedDocs && mentionedDocs.length > 0 ? ( {mentionedDocs && mentionedDocs.length > 0 ? (
<UserMessageWithMentionChips text={messageText} mentionedDocs={mentionedDocs} /> <UserMessageWithMentionChips text={messageText} mentionedDocs={mentionedDocs} />
) : ( ) : (

View file

@ -89,7 +89,7 @@ export function TabBar({
{leftActions ? <div className="flex items-center gap-0.5 shrink-0">{leftActions}</div> : null} {leftActions ? <div className="flex items-center gap-0.5 shrink-0">{leftActions}</div> : null}
<div <div
ref={scrollRef} ref={scrollRef}
className="flex h-8 items-center flex-1 gap-3 overflow-x-auto overflow-y-hidden scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden py-0" className="flex h-8 items-center flex-1 gap-3 pl-2 overflow-x-auto overflow-y-hidden scrollbar-hide [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden py-0"
> >
{tabs.map((tab) => { {tabs.map((tab) => {
const isActive = tab.id === activeTabId; const isActive = tab.id === activeTabId;

View file

@ -120,7 +120,7 @@ const PublicUserMessage: FC = () => {
> >
<div className="aui-user-message-content-wrapper col-start-2 min-w-0 flex items-end gap-2"> <div className="aui-user-message-content-wrapper col-start-2 min-w-0 flex items-end gap-2">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground"> <div className="aui-user-message-content wrap-break-word rounded-xl bg-muted px-4 py-2.5 text-foreground">
<MessagePrimitive.Parts /> <MessagePrimitive.Parts />
</div> </div>
</div> </div>