Fix: Add-on highlight message overflows and crushes the add-on title - #1335
Merged
Conversation
The add-on highlight message was a nowrap pill inside the title's flex row, so any message of real length clipped or forced the title onto multiple lines, especially on mobile. Render it as a full-width banner strip across the top of the highlighted add-on card instead, matching the product-level highlight treatment, so it wraps freely and reads as a highlight rather than a tag.
|
🚅 Deployed to the Hi.Events-pr-1335 environment in Hi.Events
3 services not affected by this PR
|
railway-app
Bot
temporarily deployed
to
Hi.Events / Hi.Events-pr-1335
September 4, 2026 19:35
Destroyed
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
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.
Issue this fixes
The add-on highlight message (
hi-product-addon-highlight-message, introduced with product add-ons in #1300) was rendered as awhite-space: nowrappill inside the add-on title's flex row. Any message of real length competed with the title for width, so on mobile it either clipped past the card edge or crushed the title onto several lines. It also read as a small tag rather than a highlight, which undercuts the point of the feature. There is no tracked GitHub issue for this; it was found while reviewing the add-on UI.Change
Reusing the product-level banner language one level down means a highlighted add-on is instantly recognisable, and the strip scales with the narrower inset card. Inactive add-ons (parent product not yet selected) keep the existing dimmed treatment, so the strip fades with the rest of the card. Multiple highlighted add-ons stack as separate cards with their own strips.
Verification
npx tsc --noEmitclean for the changed component.