Merge pull request #1461 from MODSetter/docker-hot-patch

refactor(thread): improve layout and responsiveness of welcome message
This commit is contained in:
Rohan Verma 2026-06-01 20:34:52 -07:00 committed by GitHub
commit af654cbab5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 10 deletions

View file

@ -254,13 +254,15 @@ const ThreadWelcome: FC = () => {
return (
<div className="aui-thread-welcome-root mx-auto flex w-full max-w-(--thread-max-width) grow flex-col items-center px-4 relative">
<div className="aui-thread-welcome-message absolute bottom-[calc(50%+5rem)] left-0 right-0 flex flex-col items-center text-center">
<h1 className="aui-thread-welcome-message-inner text-3xl md:text-[2.625rem] select-none">
{greeting}
</h1>
</div>
<div className="w-full flex items-start justify-center absolute top-[calc(50%-3.5rem)] left-0 right-0">
<Composer />
<div className="my-auto flex w-full flex-col items-center gap-6 py-6 sm:contents sm:my-0 sm:gap-0 sm:py-0">
<div className="aui-thread-welcome-message flex flex-col items-center text-center sm:absolute sm:bottom-[calc(50%+5rem)] sm:left-0 sm:right-0">
<h1 className="aui-thread-welcome-message-inner text-3xl md:text-[2.625rem] select-none">
{greeting}
</h1>
</div>
<div className="w-full flex items-start justify-center sm:absolute sm:top-[calc(50%-3.5rem)] sm:left-0 sm:right-0">
<Composer />
</div>
</div>
</div>
);

View file

@ -57,9 +57,13 @@ export function ChatExamplePrompts({ onSelect }: ChatExamplePromptsProps) {
</TabsList>
</div>
{CHAT_EXAMPLE_CATEGORIES.map((category) => (
<TabsContent key={category.id} value={category.id} className="mt-3">
<ScrollArea className="max-h-48">
<ul className="flex flex-col gap-2 pr-2">
<TabsContent
key={category.id}
value={category.id}
className="mt-3 focus-visible:outline-none"
>
<ScrollArea className="h-[clamp(7.5rem,26vh,12rem)]">
<ul className="flex flex-col gap-2 pr-3">
{category.prompts.map((prompt) => (
<li key={prompt}>
<ExamplePromptButton prompt={prompt} onSelect={onSelect} />