diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx index 1fe19f6bc2f2..fd071725b043 100644 --- a/apps/web/src/components/ChatView.tsx +++ b/apps/web/src/components/ChatView.tsx @@ -2542,7 +2542,6 @@ export default function ChatView(props: ChatViewProps) { return { id: `project-clone:${projectId}`, variant: "info", - compact: true, priority: "activity", icon: , title: `Cloning ${name}`, @@ -2566,7 +2565,6 @@ export default function ChatView(props: ChatViewProps) { return { id: `project-clone:${projectId}`, variant: cancelled ? "warning" : "error", - compact: true, icon: , title: cancelled ? `Cancelled cloning ${name}` : `Failed to clone ${name}`, description: cancelled ? "Retry to bring in the repository." : activeProjectClone.error, diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx index cbcb58897157..317c2136da87 100644 --- a/apps/web/src/components/chat/ComposerBanner.tsx +++ b/apps/web/src/components/chat/ComposerBanner.tsx @@ -183,17 +183,15 @@ function Row({ layout = "inline", ...props }: useRender.ComponentProps<"div"> & { - layout?: "inline" | "wrap-actions" | "wrap-actions-narrow" | "approval"; + layout?: "inline" | "wrap-actions" | "approval"; }) { const rowProps = { className: cn( "group/banner-row grid min-h-(--composer-banner-icon-column) w-full min-w-0 grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)_auto] items-center gap-x-1 text-start", "not-has-[>[data-slot=composer-banner-actions]]:grid-cols-[var(--composer-banner-icon-column)_minmax(0,1fr)]", "[&:is(button)]:cursor-pointer [&:is(button)]:rounded-md [&:is(button)]:focus-visible:outline-2 [&:is(button)]:focus-visible:-outline-offset-2 [&:is(button)]:focus-visible:outline-ring", - layout === "wrap-actions" && - "@max-[400px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)", - layout === "wrap-actions-narrow" && - "@max-[320px]:*:data-[slot=composer-banner-content]:min-h-(--composer-banner-icon-column)", + // Actions share the title row while the title fits and move below it otherwise. + layout === "wrap-actions" && "flex flex-wrap *:data-[slot=composer-banner-content]:grow", layout === "approval" && "items-start gap-x-2 gap-y-3", className, ), @@ -257,8 +255,7 @@ function Actions({ className, ...props }: ComponentProps<"span">) { className={cn( "col-start-3 row-start-1 flex flex-wrap items-center justify-end gap-1", "group-data-[composer-banner-layout=approval]/banner-row:self-center group-data-[composer-banner-layout=approval]/banner-row:gap-1.5 @max-[560px]:group-data-[composer-banner-layout=approval]/banner-row:col-start-2 @max-[560px]:group-data-[composer-banner-layout=approval]/banner-row:col-end-4 @max-[560px]:group-data-[composer-banner-layout=approval]/banner-row:row-start-2", - "@max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[400px]:group-data-[composer-banner-layout=wrap-actions]/banner-row:has-[>:nth-child(2)]:justify-end", - "@max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:col-end-4 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:row-start-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:-ms-2 @max-[320px]:group-data-[composer-banner-layout=wrap-actions-narrow]/banner-row:has-[>:nth-child(2)]:justify-start", + "group-data-[composer-banner-layout=wrap-actions]/banner-row:ms-auto", className, )} {...props} diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx index ff66869a9ec8..df69e60c8faf 100644 --- a/apps/web/src/components/chat/ComposerBannerStack.tsx +++ b/apps/web/src/components/chat/ComposerBannerStack.tsx @@ -13,7 +13,6 @@ export interface ComposerBannerStackItem { readonly id: string; readonly variant: ComposerBannerVariant; readonly priority?: "urgent" | "activity" | "notice"; - readonly compact?: boolean; readonly icon: ReactNode; readonly title: ReactNode; readonly description?: ReactNode; @@ -250,7 +249,7 @@ export function ComposerBannerStack({ className, items, attachedAbove }: Compose } /** Keep full descriptions reachable only when their inline copy is clipped. */ -function NoticeDescription({ children, compact }: { children: ReactNode; compact?: boolean }) { +function NoticeDescription({ children }: { children: ReactNode }) { const descriptionRef = useRef(null); const detailsRef = useRef(null); const [showDetails, setShowDetails] = useState(false); @@ -283,13 +282,10 @@ function NoticeDescription({ children, compact }: { children: ReactNode; compact }, []); return ( - + {children} @@ -354,17 +350,13 @@ function ComposerBannerStackAlert({ variant={item.variant} density="comfortable" > - + {item.icon} {item.title} - {item.description ? ( - - {item.description} - - ) : null} + {item.description ? {item.description} : null} {item.actions || item.onDismiss ? (