Skip to content

refactor(web): one wrap width for tooltips, plus a code variant #13031

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
juliusmarminge merged 1 commit into from
Sep 22, 2026
Merged

refactor(web): one wrap width for tooltips, plus a code variant #13031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/src/components/BranchToolbarBranchSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -918,7 +918,7 @@ export function BranchToolbarBranchSelector({
</label>
}
/>
<TooltipPopup side="top" className="max-w-72 whitespace-normal leading-tight">
<TooltipPopup side="top">
Creates the worktree from the latest matching branch on origin instead of your local
branch.
</TooltipPopup>
Expand Down
12 changes: 2 additions & 10 deletions apps/web/src/components/ChatMarkdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2209,10 +2209,7 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
)
}
/>
<TooltipPopup
side="top"
className="max-w-[min(40rem,calc(100vw-2rem))] font-mono text-[11px] leading-tight"
>
<TooltipPopup side="top" variant="code">
{/* The full path: the chip already shows the shortened form, and a link
to the workspace root collapses to a bare label that repeats it. */}
<div className="overflow-x-auto whitespace-nowrap [scrollbar-color:color-mix(in_srgb,var(--contrast-border)_78%,transparent)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[color-mix(in_srgb,var(--contrast-border)_78%,transparent)] [&::-webkit-scrollbar-track]:bg-transparent">
Expand Down Expand Up @@ -3062,12 +3059,7 @@ const CHAT_MARKDOWN_COMPONENTS = {
return (
<Tooltip>
Comment thread
juliusmarminge marked this conversation as resolved.
<TooltipTrigger render={link} />
<TooltipPopup
side="top"
className="max-w-[min(36rem,calc(100vw-2rem))] whitespace-normal leading-tight wrap-anywhere"
>
{href}
</TooltipPopup>
<TooltipPopup side="top">{href}</TooltipPopup>
</Tooltip>
);
}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6533,7 +6533,7 @@ export default function ChatView(props: ChatViewProps) {
</code>
}
/>
<TooltipPopup side="top" className="max-w-80">
<TooltipPopup side="top">
This thread last ran on {localCheckoutBranchMismatch.threadBranch}. Sending will
continue on {localCheckoutBranchMismatch.currentBranch}.
</TooltipPopup>
Expand Down
7 changes: 1 addition & 6 deletions apps/web/src/components/ComposerPromptEditorTiptap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,12 +237,7 @@ function ComposerMentionNodeView({ node }: NodeViewProps) {
<NodeViewWrapper as="span" className={COMPOSER_INLINE_CHIP_DECORATOR_CLASS_NAME}>
<Tooltip>
<TooltipTrigger render={chip} />
<TooltipPopup
side="top"
className="max-w-120 whitespace-normal leading-tight wrap-anywhere"
>
{path}
</TooltipPopup>
<TooltipPopup side="top">{path}</TooltipPopup>
Comment thread
juliusmarminge marked this conversation as resolved.
</Tooltip>
</NodeViewWrapper>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ConfirmDialogHost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function ConfirmDialogHost() {
>
<AlertDialogPopup>
<AlertDialogHeader>
<AlertDialogTitle className="wrap-anywhere">{copy.title}</AlertDialogTitle>
<AlertDialogTitle>{copy.title}</AlertDialogTitle>
{copy.description ? (
<AlertDialogDescription className="whitespace-pre-line">
{copy.description}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ConnectionStatusDot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export function ConnectionStatusDot({
return (
<Tooltip>
<TooltipTrigger render={dot} />
<TooltipPopup side="top" className="max-w-80 whitespace-pre-wrap leading-tight">
<TooltipPopup side="top" className="whitespace-pre-wrap">
{tooltipText}
</TooltipPopup>
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/GitActionsControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -659,7 +659,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
</Button>
}
/>
<TooltipPopup side="top" align="end" className="max-w-72">
<TooltipPopup side="top" align="end">
{readiness.hint ??
"Open Settings -> Source Control to configure this provider."}
</TooltipPopup>
Expand Down
4 changes: 1 addition & 3 deletions apps/web/src/components/LegacySidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -785,9 +785,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
</span>
}
/>
<TooltipPopup side="top" className="max-w-80 whitespace-normal leading-tight">
{thread.title}
</TooltipPopup>
<TooltipPopup side="top">{thread.title}</TooltipPopup>
</Tooltip>
)}
</div>
Expand Down
4 changes: 1 addition & 3 deletions apps/web/src/components/ServerUpdateAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,9 +163,7 @@ export function ServerUpdateProgress({
<span className="size-1.5 shrink-0 rounded-full bg-destructive" aria-hidden="true" />
<Tooltip>
<TooltipTrigger render={<span className="min-w-0 truncate">{state.message}</span>} />
<TooltipPopup side="top" className="max-w-80">
{state.message}
</TooltipPopup>
<TooltipPopup side="top">{state.message}</TooltipPopup>
</Tooltip>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,7 +350,7 @@ function SidebarThreadTooltip({
align="start"
sideOffset={4}
variant="glass"
className="max-w-80 text-left whitespace-normal [&_[data-slot=tooltip-viewport]]:p-0"
className="[&_[data-slot=tooltip-viewport]]:p-0"
>
<div className="flex min-w-0 max-w-80 flex-col gap-2 p-[var(--floating-content-inset)]">
<div className="min-w-0 truncate text-xs leading-tight font-medium text-foreground">
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/StartTruncatedPath.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function StartTruncatedPath({ path, className }: { path: string; classNam
>
<bdi>{path}</bdi>
</TooltipTrigger>
<TooltipPopup side="top" className="max-w-sm break-all font-mono">
<TooltipPopup side="top" variant="code">
{path}
</TooltipPopup>
</Tooltip>
Expand Down
26 changes: 4 additions & 22 deletions apps/web/src/components/chat/ChatComposer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6569,10 +6569,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
</span>
}
/>
<TooltipPopup
side="top"
className="max-w-64 whitespace-normal leading-tight"
>
<TooltipPopup side="top">
Draft attachment could not be saved locally and may be lost on
navigation.
</TooltipPopup>
Expand Down Expand Up @@ -6604,12 +6601,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
>
<RefreshIcon />
</TooltipTrigger>
<TooltipPopup
side="top"
className="max-w-64 whitespace-normal leading-tight"
>
{upload.reason}
</TooltipPopup>
<TooltipPopup side="top">{upload.reason}</TooltipPopup>
</Tooltip>
)}
<Button
Expand Down Expand Up @@ -6704,12 +6696,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
>
<RefreshIcon />
</TooltipTrigger>
<TooltipPopup
side="top"
className="max-w-64 whitespace-normal leading-tight"
>
{upload.reason}
</TooltipPopup>
<TooltipPopup side="top">{upload.reason}</TooltipPopup>
</Tooltip>
)}
<Button
Expand Down Expand Up @@ -6787,12 +6774,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
>
<RefreshIcon />
</TooltipTrigger>
<TooltipPopup
side="top"
className="max-w-64 whitespace-normal leading-tight"
>
{upload.reason}
</TooltipPopup>
<TooltipPopup side="top">{upload.reason}</TooltipPopup>
</Tooltip>
) : null}
<Button
Expand Down
8 changes: 2 additions & 6 deletions apps/web/src/components/chat/ComposerPendingApprovalActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,7 @@ export const ComposerPendingApprovalActions = memo(function ComposerPendingAppro
return option.warning ? (
<Tooltip key={option.decision}>
<TooltipTrigger render={button} />
<TooltipPopup side="top" className="max-w-72 text-xs leading-snug">
{option.warning}
</TooltipPopup>
<TooltipPopup side="top">{option.warning}</TooltipPopup>
</Tooltip>
) : (
button
Expand Down Expand Up @@ -98,9 +96,7 @@ export const ComposerPendingApprovalActions = memo(function ComposerPendingAppro
return option.warning ? (
<Tooltip key={option.decision}>
<TooltipTrigger render={item} />
<TooltipPopup side="top" className="max-w-64 text-xs leading-snug">
{option.warning}
</TooltipPopup>
<TooltipPopup side="top">{option.warning}</TooltipPopup>
</Tooltip>
) : (
item
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/chat/ComposerServerUpdateStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export function ComposerServerUpdateStatus({
</button>
}
/>
<TooltipPopup side="top" className="max-w-80">
<TooltipPopup side="top">
{title}: {detail}
</TooltipPopup>
</Tooltip>
Expand Down
8 changes: 2 additions & 6 deletions apps/web/src/components/chat/DraftHeroHeadline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,9 +146,7 @@ export function DraftHeroHeadline({
{activeProjectDisplayName ?? "Choose a project"}
</TooltipTrigger>
{activeProjectDisplayName ? (
<TooltipPopup side="top" className="max-w-80">
{activeProjectDisplayName}
</TooltipPopup>
<TooltipPopup side="top">{activeProjectDisplayName}</TooltipPopup>
) : null}
</Tooltip>
<MenuPopup align="center" className="max-h-80 min-w-40! w-max max-w-64 overflow-y-auto">
Expand Down Expand Up @@ -202,9 +200,7 @@ export function DraftHeroHeadline({
<TooltipTrigger render={<span className="block min-w-0 truncate" />}>
{group.displayName}
</TooltipTrigger>
<TooltipPopup side="top" className="max-w-80">
{group.displayName}
</TooltipPopup>
<TooltipPopup side="top">{group.displayName}</TooltipPopup>
</Tooltip>
{showProjectEnvironments ? (
<ProjectEnvironmentBadge
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/chat/ModelListRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
return (
<Tooltip>
<TooltipTrigger render={row} />
<TooltipPopup side="left" align="center" className="max-w-64 text-balance leading-snug">
<TooltipPopup side="left" align="center">
{props.disabledReason}
</TooltipPopup>
</Tooltip>
Expand Down
3 changes: 0 additions & 3 deletions apps/web/src/components/chat/ModelPickerSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ const NEW_BADGE_CLASS = `${BADGE_BASE_CLASS} text-update-foreground `;
/** Opens toward the rail so the list stays readable (not over the model names). */
const PICKER_TOOLTIP_SIDE = "left" as const;
const PICKER_TOOLTIP_SIDE_OFFSET = 8;
const PICKER_TOOLTIP_CLASS = "max-w-64 text-balance font-normal leading-snug";

export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
selectedInstanceId: ProviderInstanceId | "favorites";
Expand Down Expand Up @@ -139,7 +138,6 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
side={PICKER_TOOLTIP_SIDE}
sideOffset={PICKER_TOOLTIP_SIDE_OFFSET}
align="center"
className={PICKER_TOOLTIP_CLASS}
>
Favorites
</TooltipPopup>
Expand Down Expand Up @@ -242,7 +240,6 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
side={PICKER_TOOLTIP_SIDE}
sideOffset={PICKER_TOOLTIP_SIDE_OFFSET}
align="center"
className={PICKER_TOOLTIP_CLASS}
>
{tooltip}
</TooltipPopup>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/chat/ProviderStatusBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
<TooltipTrigger
render={<div className="line-clamp-3 text-muted-foreground">{message}</div>}
/>
<TooltipPopup side="top" className="max-w-96 whitespace-pre-wrap">
<TooltipPopup side="top" className="whitespace-pre-wrap">
{message}
</TooltipPopup>
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/chat/ThreadErrorBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const ThreadErrorBanner = memo(function ThreadErrorBanner({
<AlertDescription>
<Tooltip>
<TooltipTrigger render={<div className="line-clamp-3" />}>{error}</TooltipTrigger>
<TooltipPopup side="top" className="max-w-96 whitespace-pre-wrap">
<TooltipPopup side="top" className="whitespace-pre-wrap">
{error}
</TooltipPopup>
</Tooltip>
Expand Down
8 changes: 2 additions & 6 deletions apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,9 +393,7 @@ export function CloudEnvironmentConnectRows({
? "Unavailable"
: "Checking…"))}
</TooltipTrigger>
<TooltipPopup className="max-w-80 break-words">
{unsupportedDetail ?? statusText}
</TooltipPopup>
<TooltipPopup>{unsupportedDetail ?? statusText}</TooltipPopup>
Comment thread
juliusmarminge marked this conversation as resolved.
</Tooltip>
</label>
);
Expand Down Expand Up @@ -454,9 +452,7 @@ export function CloudEnvironmentConnectRows({
Add
</Button>
</TooltipTrigger>
<TooltipPopup className="max-w-80 break-words">
{unsupportedDetail ?? "Client not supported"}
</TooltipPopup>
<TooltipPopup>{unsupportedDetail ?? "Client not supported"}</TooltipPopup>
</Tooltip>
) : savedConnection ? (
<Button size="sm" variant="outline" disabled>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/composerContextPresentation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ function ImageContextChip(props: {
/>
}
/>
<TooltipPopup side="top" className="max-w-80 whitespace-pre-wrap leading-tight">
<TooltipPopup side="top" className="whitespace-pre-wrap">
{attachmentTooltip(props.record, props.upload)}
</TooltipPopup>
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/contextChipParts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ export function FileChip(props: {
)
}
/>
<TooltipPopup side="top" className="max-w-80 whitespace-pre-wrap leading-tight">
<TooltipPopup side="top" className="whitespace-pre-wrap">
{props.tooltip}
</TooltipPopup>
</Tooltip>
Expand Down
8 changes: 2 additions & 6 deletions apps/web/src/components/files/FileBreadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,7 @@ function BreadcrumbLabel(props: {
>
{props.label}
</TooltipTrigger>
<TooltipPopup side="top" className="max-w-80">
{props.pathLabel}
</TooltipPopup>
<TooltipPopup side="top">{props.pathLabel}</TooltipPopup>
</Tooltip>
);
}
Expand Down Expand Up @@ -241,9 +239,7 @@ function DirectoryBreadcrumb(props: FileBreadcrumbsProps & { readonly crumb: Fil
>
<span className="block truncate">{props.crumb.label}</span>
</TooltipTrigger>
<TooltipPopup side="top" className="max-w-80">
{props.crumb.path || props.projectName}
</TooltipPopup>
<TooltipPopup side="top">{props.crumb.path || props.projectName}</TooltipPopup>
</Tooltip>
{open ? (
<BreadcrumbMenuContent
Expand Down
4 changes: 1 addition & 3 deletions apps/web/src/components/media/MediaActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,9 +186,7 @@ export function MediaActions({
void showMenu({ x: bounds.left, y: bounds.bottom });
}}
/>
<TooltipPopup className="max-w-[min(40rem,calc(100vw-2rem))] break-all font-mono text-[11px] leading-tight">
{tooltip}
</TooltipPopup>
<TooltipPopup variant="code">{tooltip}</TooltipPopup>
</Tooltip>
);
}
2 changes: 1 addition & 1 deletion apps/web/src/components/onboarding/WelcomeWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1453,7 +1453,7 @@ function ImportCandidateRow({
</span>
) : null}
</TooltipTrigger>
<TooltipPopup className="max-w-96 break-all font-mono">{candidate.path}</TooltipPopup>
<TooltipPopup variant="code">{candidate.path}</TooltipPopup>
</Tooltip>
<ImportRowMeta
sources={nested ? null : candidate.sources}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/pullRequest/PullRequestCopyableCode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function PullRequestCopyableCode({
Copied
</span>
</TooltipTrigger>
<TooltipPopup className="max-w-96 wrap-anywhere font-mono" side={tooltipSide}>
<TooltipPopup variant="code" side={tooltipSide}>
{`${isCopied ? "Copied" : copyLabel}: ${value}`}
</TooltipPopup>
</Tooltip>
Expand Down
4 changes: 1 addition & 3 deletions apps/web/src/components/pullRequest/PullRequestListFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,9 +202,7 @@ function PullRequestFilterRadioGroup<Value extends string>({
return (
<Tooltip key={option.value}>
<TooltipTrigger render={item} />
<TooltipPopup side="top" className="max-w-80">
{option.unavailable}
</TooltipPopup>
<TooltipPopup side="top">{option.unavailable}</TooltipPopup>
</Tooltip>
);
})}
Expand Down
Loading
Loading