From 44138668a4ce7c452d864334e6ef45b30eccdba6 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 14 Jul 2026 02:58:39 +0530
Subject: [PATCH] refactor(thread): update layout structure and improve styling
 for welcome message

---
 .../connector-popup/components/connector-card.tsx   | 13 +++++++++++--
 surfsense_web/components/assistant-ui/thread.tsx    | 10 +++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
index 195ca98ea..d8e4b174c 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
@@ -79,7 +79,7 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 		}
 
 		if (isDeprecatedForConnect) {
-			return "Deprecated — no longer available to connect.";
+			return "Deprecated. No longer available to connect.";
 		}
 
 		return description;
@@ -102,7 +102,16 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 						: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
 				)}
 			>
-				{connectorType ? (
+				{isMCP ? (
+					<span
+						aria-hidden="true"
+						className="size-6 bg-current"
+						style={{
+							mask: "url('/connectors/modelcontextprotocol.svg') center / contain no-repeat",
+							WebkitMask: "url('/connectors/modelcontextprotocol.svg') center / contain no-repeat",
+						}}
+					/>
+				) : connectorType ? (
 					getConnectorIcon(connectorType, "size-6")
 				) : id === "youtube-crawler" ? (
 					<IconBrandYoutube className="size-6" />
diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 066df6e5f..47ac794ea 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -258,17 +258,17 @@ const ThreadWelcome: FC = () => {
 	const greeting = useMemo(() => getTimeBasedGreeting(user), [user]);
 
 	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="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">
+		<div className="aui-thread-welcome-root flex min-h-0 flex-1">
+			<section className="mx-auto grid w-full max-w-(--thread-max-width) content-center gap-6 pt-8 pb-[clamp(5rem,16vh,12rem)]">
+				<div className="aui-thread-welcome-message flex flex-col items-center px-4 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 sm:absolute sm:top-[calc(50%-3.5rem)] sm:left-0 sm:right-0">
+				<div className="flex w-full items-start justify-center">
 					<Composer />
 				</div>
-			</div>
+			</section>
 		</div>
 	);
 };