refactor(chat-header): update className handling for responsive design and improve layout consistency

This commit is contained in:
Anish Sarkar 2026-07-16 13:11:54 +05:30
parent 918133a4be
commit b100eda8c6
2 changed files with 9 additions and 6 deletions

View file

@ -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}>

View file

@ -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>
);
}