From b100eda8c63f30178938ced147fb9b6ecaf66df6 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 16 Jul 2026 13:11:54 +0530
Subject: [PATCH] refactor(chat-header): update className handling for
 responsive design and improve layout consistency

---
 surfsense_web/components/assistant-ui/thread.tsx  | 6 +++---
 surfsense_web/components/new-chat/chat-header.tsx | 9 ++++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 634d9bd8b..f11e82952 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -102,8 +102,8 @@ import { useCommentsSync } from "@/hooks/use-comments-sync";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { useElectronAPI } from "@/hooks/use-platform";
 import { useScraperCapabilities } from "@/hooks/use-scraper-capabilities";
-import { captureDisplayToPngDataUrl } from "@/lib/chat/display-media-capture";
 import { canSubmitChat } from "@/lib/chat/can-submit-chat";
+import { captureDisplayToPngDataUrl } from "@/lib/chat/display-media-capture";
 import { getMentionDocKey } from "@/lib/chat/mention-doc-key";
 import { slideoutOpenedTickAtom } from "@/lib/layout-events";
 import { findPlatform, type PlaygroundPlatform } from "@/lib/playground/catalog";
@@ -1715,10 +1715,10 @@ const ComposerAction: FC<ComposerActionProps> = ({
 				)}
 				<ConnectedScraperIcons workspaceId={workspaceId} />
 			</div>
-			<div className="ml-auto flex min-w-0 shrink-0 items-center gap-2">
+			<div className="ml-auto flex min-w-0 shrink items-center gap-2">
 				<ChatHeader
 					workspaceId={workspaceId}
-					className="h-9 max-w-[44vw] px-2 sm:max-w-[220px] sm:px-3"
+					className="h-9 max-w-[44vw] px-2 sm:max-w-none sm:px-3"
 					onChatModelSelected={onChatModelSelected}
 				/>
 				<AuiIf condition={({ thread }) => !thread.isRunning}>
diff --git a/surfsense_web/components/new-chat/chat-header.tsx b/surfsense_web/components/new-chat/chat-header.tsx
index e83a95d6c..f315f7645 100644
--- a/surfsense_web/components/new-chat/chat-header.tsx
+++ b/surfsense_web/components/new-chat/chat-header.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import { ImageModelSelector } from "./image-model-selector";
 import { ModelSelector } from "./model-selector";
 
@@ -10,14 +11,16 @@ interface ChatHeaderProps {
 }
 
 export function ChatHeader({ workspaceId, className, onChatModelSelected }: ChatHeaderProps) {
+	const selectorClassName = cn(className, "sm:max-w-[180px] sm:min-w-0");
+
 	return (
-		<div className="flex min-w-0 shrink-0 items-center gap-2">
+		<div className="flex min-w-0 shrink items-center gap-2 sm:max-w-[360px]">
 			<ModelSelector
 				workspaceId={workspaceId}
-				className={className}
+				className={selectorClassName}
 				onChatModelSelected={onChatModelSelected}
 			/>
-			<ImageModelSelector workspaceId={workspaceId} className={className} mobileIconOnly />
+			<ImageModelSelector workspaceId={workspaceId} className={selectorClassName} mobileIconOnly />
 		</div>
 	);
 }