From 5b613de175dd2567ae806907440ef83f6cd7c2a4 Mon Sep 17 00:00:00 2001 From: Utkarsh Patil <73941998+UtkarshUsername@users.noreply.github.com> Date: Tue, 6 Oct 2026 02:02:03 +0530 Subject: [PATCH] fix(web): wrap full status text in composer hover details (#16158) --- apps/web/src/components/chat/ComposerBannerStack.tsx | 2 +- apps/web/src/components/ui/button.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx index 77db010cf696ac01372a6d2cd55d6cec49f53b73..0cf3e8d05ab0d9d509b50c5137f5887e2378d0f4 100644 --- a/apps/web/src/components/chat/ComposerBannerStack.tsx +++ b/apps/web/src/components/chat/ComposerBannerStack.tsx @@ -306,7 +306,7 @@ function NoticeDescription({ children, compact }: { children: ReactNode; compact aria-label="Notice details" tooltipStyle side="top" - className="max-w-80 whitespace-normal wrap-anywhere" + className="max-w-[min(30rem,calc(100vw-2rem))] whitespace-normal wrap-anywhere [--inline-button-text-align:start] [--inline-button-white-space:normal] [&_[data-slot=inline-button]]:max-w-full" > {children} diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx index 1a101f1071145982415cb50c36d91b692ea327f0..177e4f8570181bcbd3601fb2d8839163e5e89321 100644 --- a/apps/web/src/components/ui/button.tsx +++ b/apps/web/src/components/ui/button.tsx @@ -101,7 +101,7 @@ function Button({ className, variant, size, render, ...props }: ButtonProps) { export { Button, buttonVariants, type ButtonSize, type ButtonVariant }; const inlineButtonVariants = cva( - "inline-flex shrink-0 cursor-pointer items-center gap-0.5 whitespace-nowrap font-medium underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64", + "inline-flex shrink-0 cursor-pointer items-center gap-0.5 font-medium underline-offset-2 [text-align:var(--inline-button-text-align,center)] [white-space:var(--inline-button-white-space,nowrap)] hover:underline focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-64", { defaultVariants: { tone: "default" }, variants: { @@ -117,7 +117,7 @@ const inlineButtonVariants = cva( }, ); -/** An inline text action that keeps the size of the surrounding text and underlines on hover. */ +/** An inline text action. Set --inline-button-white-space to normal in wrapping prose containers. */ export function InlineButton({ className, tone, -- 2.54.0