From 66bd7e6fc300682810b1daca3d8bce60828dd5cb Mon Sep 17 00:00:00 2001
From: "DESKTOP-RTLN3BA\\$punk" <vermarohanfinal@gmail.com>
Date: Mon, 1 Jun 2026 20:21:21 -0700
Subject: [PATCH 1/2] refactor(chat): enhance chat example prompts layout and
 accessibility

- Updated TabsContent component to include focus-visible outline for better accessibility.
- Adjusted ScrollArea height to improve visual consistency and responsiveness.
- Increased padding in the list for better spacing and usability.
---
 .../components/new-chat/chat-example-prompts.tsx       | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/components/new-chat/chat-example-prompts.tsx b/surfsense_web/components/new-chat/chat-example-prompts.tsx
index 95d7a0eaa..4a204386a 100644
--- a/surfsense_web/components/new-chat/chat-example-prompts.tsx
+++ b/surfsense_web/components/new-chat/chat-example-prompts.tsx
@@ -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} />

From 087057176533bcf80e0682f74e89a1d38bc035ad Mon Sep 17 00:00:00 2001
From: "DESKTOP-RTLN3BA\\$punk" <vermarohanfinal@gmail.com>
Date: Mon, 1 Jun 2026 20:34:18 -0700
Subject: [PATCH 2/2] refactor(thread): improve layout and responsiveness of
 welcome message

- Adjusted the structure of the ThreadWelcome component to enhance layout consistency across different screen sizes.
- Updated CSS classes to ensure proper alignment and spacing for the welcome message and composer, improving overall user experience.
---
 surfsense_web/components/assistant-ui/thread.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 5748b441c..dbc831b2f 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -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>
 	);