From aa2b25d29b4b13ef1c2ee80e1afade1635de9ca8 Mon Sep 17 00:00:00 2001 From: Julius Marminge Date: Tue, 22 Sep 2026 12:22:15 -0700 Subject: [PATCH] refactor(web): one wrap width for tooltips, plus a code variant (#13031) Co-authored-by: Claude Fable 5 --- .../BranchToolbarBranchSelector.tsx | 2 +- apps/web/src/components/ChatMarkdown.tsx | 12 ++----- apps/web/src/components/ChatView.tsx | 2 +- .../components/ComposerPromptEditorTiptap.tsx | 7 +--- apps/web/src/components/ConfirmDialogHost.tsx | 2 +- .../src/components/ConnectionStatusDot.tsx | 2 +- apps/web/src/components/GitActionsControl.tsx | 2 +- apps/web/src/components/LegacySidebar.tsx | 4 +-- .../web/src/components/ServerUpdateAction.tsx | 4 +-- apps/web/src/components/Sidebar.tsx | 2 +- .../web/src/components/StartTruncatedPath.tsx | 2 +- apps/web/src/components/chat/ChatComposer.tsx | 26 +++------------ .../chat/ComposerPendingApprovalActions.tsx | 8 ++--- .../chat/ComposerServerUpdateStatus.tsx | 2 +- .../src/components/chat/DraftHeroHeadline.tsx | 8 ++--- apps/web/src/components/chat/ModelListRow.tsx | 2 +- .../components/chat/ModelPickerSidebar.tsx | 3 -- .../components/chat/ProviderStatusBanner.tsx | 2 +- .../src/components/chat/ThreadErrorBanner.tsx | 2 +- .../cloud/CloudEnvironmentConnectList.tsx | 8 ++--- .../composerContextPresentation.tsx | 2 +- apps/web/src/components/contextChipParts.tsx | 2 +- .../src/components/files/FileBreadcrumbs.tsx | 8 ++--- .../web/src/components/media/MediaActions.tsx | 4 +-- .../components/onboarding/WelcomeWizard.tsx | 2 +- .../pullRequest/PullRequestCopyableCode.tsx | 2 +- .../pullRequest/PullRequestListFilters.tsx | 4 +-- .../settings/ConnectionsSettings.tsx | 14 +++----- .../settings/DiagnosticsSettings.tsx | 32 ++++--------------- .../settings/KeybindingsSettings.tsx | 4 +-- .../settings/ResourceTelemetryDiagnostics.tsx | 10 ++---- .../components/settings/settingsLayout.tsx | 8 ++--- apps/web/src/components/ui/alert-dialog.tsx | 2 +- apps/web/src/components/ui/dialog.tsx | 2 +- apps/web/src/components/ui/tooltip.tsx | 7 +++- apps/web/src/components/usage/UsageLimits.tsx | 2 +- apps/web/src/routes/_chat.pull-requests.tsx | 4 +-- scripts/lint-restyle-ceiling.ts | 2 +- 38 files changed, 60 insertions(+), 153 deletions(-) diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx index ed8f1cd1f0266037f2c2db810db6bc74c033c8f4..3bab1315ee8bdd7ea15067bac50dc2df5c650fa0 100644 --- a/apps/web/src/components/BranchToolbarBranchSelector.tsx +++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx @@ -918,7 +918,7 @@ export function BranchToolbarBranchSelector({ } /> - + Creates the worktree from the latest matching branch on origin instead of your local branch. diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx index 90fca5356804ded7f5101cc28c1d39d06b536f43..fe7859968beaeb511a93117ef34096c1c512b7bf 100644 --- a/apps/web/src/components/ChatMarkdown.tsx +++ b/apps/web/src/components/ChatMarkdown.tsx @@ -2209,10 +2209,7 @@ const MarkdownFileLink = memo(function MarkdownFileLink({ ) } /> - + {/* 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. */}
@@ -3062,12 +3059,7 @@ const CHAT_MARKDOWN_COMPONENTS = { return ( - - {href} - + {href} ); } diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx index 0d0810eefa427974178ac1c676aa92b945783e97..b97411e7a44bb0ebdf88733a637ed91e7fe04ae8 100644 --- a/apps/web/src/components/ChatView.tsx +++ b/apps/web/src/components/ChatView.tsx @@ -6533,7 +6533,7 @@ export default function ChatView(props: ChatViewProps) { } /> - + This thread last ran on {localCheckoutBranchMismatch.threadBranch}. Sending will continue on {localCheckoutBranchMismatch.currentBranch}. diff --git a/apps/web/src/components/ComposerPromptEditorTiptap.tsx b/apps/web/src/components/ComposerPromptEditorTiptap.tsx index 0e452fd4ac26c5907c8ed905757ecc8dc9400914..ec9b9e07e2fbc03ccc6e394256c971c4557e498f 100644 --- a/apps/web/src/components/ComposerPromptEditorTiptap.tsx +++ b/apps/web/src/components/ComposerPromptEditorTiptap.tsx @@ -237,12 +237,7 @@ function ComposerMentionNodeView({ node }: NodeViewProps) { - - {path} - + {path} ); diff --git a/apps/web/src/components/ConfirmDialogHost.tsx b/apps/web/src/components/ConfirmDialogHost.tsx index 3e19606bd4c69ab07245a920e69606b0e6edf2df..92477801eb72c8c243d23c877d447d41bcf8108b 100644 --- a/apps/web/src/components/ConfirmDialogHost.tsx +++ b/apps/web/src/components/ConfirmDialogHost.tsx @@ -77,7 +77,7 @@ export function ConfirmDialogHost() { > - {copy.title} + {copy.title} {copy.description ? ( {copy.description} diff --git a/apps/web/src/components/ConnectionStatusDot.tsx b/apps/web/src/components/ConnectionStatusDot.tsx index 6a23a05328732ee5b0caf435346663cac9424a90..b371b6c1fe97473d957ccd33f99b9b987008fd43 100644 --- a/apps/web/src/components/ConnectionStatusDot.tsx +++ b/apps/web/src/components/ConnectionStatusDot.tsx @@ -69,7 +69,7 @@ export function ConnectionStatusDot({ return ( - + {tooltipText} diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx index 4eca7867132e188137a67d95ba6a94fd731e70ae..c849532dafdba801c7aad5aa62e2366b50e9e06e 100644 --- a/apps/web/src/components/GitActionsControl.tsx +++ b/apps/web/src/components/GitActionsControl.tsx @@ -659,7 +659,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) { } /> - + {readiness.hint ?? "Open Settings -> Source Control to configure this provider."} diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx index b4b686a0c11d8f83a7a5d6d680e1e4cf778a9b06..b98f3a30ed261880d3d9c3b73b6030d9df27baa9 100644 --- a/apps/web/src/components/LegacySidebar.tsx +++ b/apps/web/src/components/LegacySidebar.tsx @@ -785,9 +785,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP } /> - - {thread.title} - + {thread.title} )}
diff --git a/apps/web/src/components/ServerUpdateAction.tsx b/apps/web/src/components/ServerUpdateAction.tsx index 288078729d5dc1fc893d267fc4ae81233a2e6033..a4b288a6eab7b8fc14be3817884e34b0c961d0c4 100644 --- a/apps/web/src/components/ServerUpdateAction.tsx +++ b/apps/web/src/components/ServerUpdateAction.tsx @@ -163,9 +163,7 @@ export function ServerUpdateProgress({ } /> - - {state.message} - + {state.message} ); diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx index 022024eadcc8d583c39ddd4bb8aa76983789d442..799ab3f9e545adbebb9f7ce94e2d9d9dd13cbb95 100644 --- a/apps/web/src/components/Sidebar.tsx +++ b/apps/web/src/components/Sidebar.tsx @@ -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" >
diff --git a/apps/web/src/components/StartTruncatedPath.tsx b/apps/web/src/components/StartTruncatedPath.tsx index b467d141a8ca1cb5dea16673048211a04e9b661c..60cb6cdc740d9719ba6a18d7ca65de490df8f2af 100644 --- a/apps/web/src/components/StartTruncatedPath.tsx +++ b/apps/web/src/components/StartTruncatedPath.tsx @@ -17,7 +17,7 @@ export function StartTruncatedPath({ path, className }: { path: string; classNam > {path} - + {path} diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx index f1de1f81434e114bee464fc6b275ebecd91dd45c..101dbcb4af2547e60ba4d3922b94fa816ac017ad 100644 --- a/apps/web/src/components/chat/ChatComposer.tsx +++ b/apps/web/src/components/chat/ChatComposer.tsx @@ -6569,10 +6569,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) } /> - + Draft attachment could not be saved locally and may be lost on navigation. @@ -6604,12 +6601,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) > - - {upload.reason} - + {upload.reason} )} } /> - + {title}: {detail} diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx index d542cd6a8a9f28aae60094046d25a5d56e589340..89f5c103d0a63f1d2794383ee0f6bbede6f1359d 100644 --- a/apps/web/src/components/chat/DraftHeroHeadline.tsx +++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx @@ -146,9 +146,7 @@ export function DraftHeroHeadline({ {activeProjectDisplayName ?? "Choose a project"} {activeProjectDisplayName ? ( - - {activeProjectDisplayName} - + {activeProjectDisplayName} ) : null} @@ -202,9 +200,7 @@ export function DraftHeroHeadline({ }> {group.displayName} - - {group.displayName} - + {group.displayName} {showProjectEnvironments ? ( - + {props.disabledReason} diff --git a/apps/web/src/components/chat/ModelPickerSidebar.tsx b/apps/web/src/components/chat/ModelPickerSidebar.tsx index 19a542d2aa2fea624d26c7278c27ba5c7434e0c6..93d2b27267707efd4501b69db568370630db65db 100644 --- a/apps/web/src/components/chat/ModelPickerSidebar.tsx +++ b/apps/web/src/components/chat/ModelPickerSidebar.tsx @@ -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"; @@ -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 @@ -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} diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx index 210bff4d7ad4b636465883f25a4f485d9d991673..9e84fc01c920fb9a7169cfafc02cb456ee1a4036 100644 --- a/apps/web/src/components/chat/ProviderStatusBanner.tsx +++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx @@ -100,7 +100,7 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({ {message}
} /> - + {message} diff --git a/apps/web/src/components/chat/ThreadErrorBanner.tsx b/apps/web/src/components/chat/ThreadErrorBanner.tsx index 29a6a6db18462080a87a79afb205bcb1251de9e8..df01506ba9eef362214190e1036073985161d73f 100644 --- a/apps/web/src/components/chat/ThreadErrorBanner.tsx +++ b/apps/web/src/components/chat/ThreadErrorBanner.tsx @@ -53,7 +53,7 @@ export const ThreadErrorBanner = memo(function ThreadErrorBanner({ }>{error} - + {error} diff --git a/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx b/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx index de054d0a5d29c82c0a6bd87b0e6b837f64d73656..5022031e98e621c7edcc0450a7d351c8b333ea80 100644 --- a/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx +++ b/apps/web/src/components/cloud/CloudEnvironmentConnectList.tsx @@ -393,9 +393,7 @@ export function CloudEnvironmentConnectRows({ ? "Unavailable" : "Checking…"))} - - {unsupportedDetail ?? statusText} - + {unsupportedDetail ?? statusText} ); @@ -454,9 +452,7 @@ export function CloudEnvironmentConnectRows({ Add - - {unsupportedDetail ?? "Client not supported"} - + {unsupportedDetail ?? "Client not supported"} ) : savedConnection ? (
diff --git a/apps/web/src/components/settings/DiagnosticsSettings.tsx b/apps/web/src/components/settings/DiagnosticsSettings.tsx index 0fe1ae2f624ebc3018da879a89f21bd5755f862f..15fa80237da9fb2a40fea34dc5105babc26f9c73 100644 --- a/apps/web/src/components/settings/DiagnosticsSettings.tsx +++ b/apps/web/src/components/settings/DiagnosticsSettings.tsx @@ -109,12 +109,7 @@ function StatBlock({ } /> - - {tooltip} - + {tooltip} ) : null} @@ -225,10 +220,7 @@ function TraceIdCell({ traceId }: { traceId: string }) { } /> - + {traceId} @@ -300,10 +292,7 @@ function ProcessNameCell({ {name}} /> - + {process.command} @@ -411,10 +400,7 @@ function ProcessDiagnosticsTable({ {process.command}} /> - + {process.command} @@ -484,10 +470,7 @@ function ResourceHistoryProcessNameCell({ {name}} /> - + {process.command} @@ -654,10 +637,7 @@ function ProcessResourceHistoryTable({ {process.command}} /> - + {process.command} diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx index 7c5bbfa65fbea4b5620451a2be313f8fafb68dd1..57f9fff4d4aa874f5ee6d22ba4c7cf28b609ca23 100644 --- a/apps/web/src/components/settings/KeybindingsSettings.tsx +++ b/apps/web/src/components/settings/KeybindingsSettings.tsx @@ -261,9 +261,7 @@ function WarningTooltipIcon({ > - - {children} - + {children} ); } diff --git a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx index 51cabd6010bc2cd8ec6979e360156f7a9e1fe06f..36326958550dffed842595fe19123ec6f9ce7f78 100644 --- a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx +++ b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx @@ -503,10 +503,7 @@ function ProcessTreeName({ {name}} /> - + {process.command || process.name} @@ -721,10 +718,7 @@ function HistoryProcessTable({ } /> - + {process.command || process.name} diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx index 6691b93a72424be81847efa8ea77e9ca57fe82ad..c204fb9d6b6551d75bfbe7d90973967fda974828 100644 --- a/apps/web/src/components/settings/settingsLayout.tsx +++ b/apps/web/src/components/settings/settingsLayout.tsx @@ -156,9 +156,7 @@ export function PolicyTooltip({ children }: { readonly children: string }) { } /> - - {children} - + {children} ); } @@ -372,9 +370,7 @@ export function SettingsRow({ {control} - - {message} - + {message} ); // A mixed selection keeps the real control with "Mixed" as its placeholder diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx index 6e6c1ce2b210658afc31080a860234daa940a4a8..7cd6d40c59ee600a100017ef037e6a56beb15324 100644 --- a/apps/web/src/components/ui/alert-dialog.tsx +++ b/apps/web/src/components/ui/alert-dialog.tsx @@ -101,7 +101,7 @@ function AlertDialogFooter({ function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) { return ( diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx index 22ce5637204f51284ff3ad75d4b93127b6bd4ee2..db1b6e35b80f171dc13544fa0e83318d50f19be2 100644 --- a/apps/web/src/components/ui/dialog.tsx +++ b/apps/web/src/components/ui/dialog.tsx @@ -145,7 +145,7 @@ function DialogFooter({ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) { return ( diff --git a/apps/web/src/components/ui/tooltip.tsx b/apps/web/src/components/ui/tooltip.tsx index c0aaea40ceaec1a70dd3f6e5be5ed544b19ad1d9..7ba9e4c238c49422a12d604691b59d58e28ddde8 100644 --- a/apps/web/src/components/ui/tooltip.tsx +++ b/apps/web/src/components/ui/tooltip.tsx @@ -23,7 +23,8 @@ function TooltipPopup({ align?: TooltipPrimitive.Positioner.Props["align"]; side?: TooltipPrimitive.Positioner.Props["side"]; sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"]; - variant?: "default" | "glass"; + /** `code` renders monospace content that breaks anywhere, for paths and commands. */ + variant?: "default" | "glass" | "code"; anchor?: TooltipPrimitive.Positioner.Props["anchor"]; }) { return ( @@ -42,6 +43,10 @@ function TooltipPopup({ variant === "glass" ? "dropdown-glass shadow-xl shadow-black/25 before:hidden" : "border bg-popover not-dark:bg-clip-padding shadow-md/5", + // One wrap width for prose; code dumps get more room and break anywhere. + variant === "code" + ? "max-w-120 wrap-anywhere text-left font-mono text-[11px] leading-relaxed" + : "max-w-80 wrap-anywhere whitespace-normal leading-snug", className, )} data-slot="tooltip-popup" diff --git a/apps/web/src/components/usage/UsageLimits.tsx b/apps/web/src/components/usage/UsageLimits.tsx index 6d30d49a7e4a7e85c3c4653061b2f6ff1ac9d283..05c91739e25112b8968f51928aadaaf2a7c64889 100644 --- a/apps/web/src/components/usage/UsageLimits.tsx +++ b/apps/web/src/components/usage/UsageLimits.tsx @@ -127,7 +127,7 @@ function WindowBar({ /> ) : null} - +
{remaining}% left{timeLeft !== null ? ` · ${timeLeft}% of the window left` : ""} diff --git a/apps/web/src/routes/_chat.pull-requests.tsx b/apps/web/src/routes/_chat.pull-requests.tsx index ce2bd238746a2aada7ba0c6877c97d4332ac04a3..1e540d64634b7908258f3339e1bbd5391cbbcd8f 100644 --- a/apps/web/src/routes/_chat.pull-requests.tsx +++ b/apps/web/src/routes/_chat.pull-requests.tsx @@ -2280,9 +2280,7 @@ function CompactFilterMenu({ ) : ( - - {option.unavailable} - + {option.unavailable} ); })} diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts index db8a73b20326fb891a39006072178a8b19ec8a98..a0743a16763130a90f33dd35e2b7372eea2fb67e 100644 --- a/scripts/lint-restyle-ceiling.ts +++ b/scripts/lint-restyle-ceiling.ts @@ -8,7 +8,7 @@ import * as NodeURL from "node:url"; // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you // migrate a file, and delete this script when the rule becomes an error. -export const RESTYLE_CEILING = 981; +export const RESTYLE_CEILING = 921; const RULE = "shadcn(no-restyle)"; -- 2.54.0