fix: pricing page customer badge tooltip styling#2874
Draft
fix: pricing page customer badge tooltip styling#2874
Conversation
The customer logo tooltips on the pricing page were using the shared Tooltip component which has a compact label style (15px height, overflow-hidden, dark bg-primary background, 10px mono font). This caused the customer name and case study link to be truncated and rendered with a black background. Switched to HoverCard which provides proper card-like styling (surface background, border, shadow, adequate sizing) consistent with other hover/dropdown cards in the codebase. HoverCard also supports hoverable content, making the 'Read case study' link clickable. Co-authored-by: felixkrrr <felixkrrr@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Same pattern used for Tooltip and other Radix primitives — cast HoverCard Root to make children optional so JSX usage with openDelay/ closeDelay props passes strict type checking. Co-authored-by: felixkrrr <felixkrrr@users.noreply.github.com>
Reverts the HoverCard approach which had React 19 type compatibility
issues. Instead, keeps Tooltip (which already has proper type casts)
but overrides TooltipContent className to get card-like appearance:
- h-auto instead of h-[15px] (no truncation)
- bg-surface-bg with border and shadow (not black bg-primary)
- font-sans text-sm (not font-mono text-[10px])
- rounded-md border-line-structure for consistent card look
Also sets disableHoverableContent={false} on TooltipProvider so users
can hover over the tooltip content to click the case study link.
Co-authored-by: felixkrrr <felixkrrr@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes LFE-9488
Problem
The customer logo tooltips on the pricing page were broken — they rendered with a black background, truncated text, and the "Read case study" link was not clickable.
This happened because the
TrustedBycomponent used the sharedTooltipContentwhich has a compact label style:h-[15px]fixed height → text truncationoverflow-hidden→ content clippedbg-primary→ dark/black backgroundfont-mono text-[10px]→ inappropriate font stylingdisableHoverableContent={true}(default) → impossible to click "Read case study" linkFix
Overrides
TooltipContentclassName inTrustedBy.tsxto get card-like appearance matching other hover menus:h-autoinstead ofh-[15px]— no truncationbg-surface-bgwithborder-line-structureandshadow-md— proper card look (not black)font-sans text-sm— readable text (not tiny monospace)rounded-md— consistent card stylingAlso sets
disableHoverableContent={false}onTooltipProviderso users can hover over the tooltip content to click the "Read case study" link.Only one file changed:
components/home/components/TrustedBy.tsxLinear Issue: LFE-9488