From ccd798352452ffffa660f21632157b5c6d8d0444 Mon Sep 17 00:00:00 2001
From: Dave Earley <dave@hi.events>
Date: Fri, 4 Sep 2026 20:35:31 +0100
Subject: [PATCH] Fix: Add-on highlight message overflows and crushes the title

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.
---
 .../product-widget/SelectProducts/index.tsx   | 10 +++---
 frontend/src/styles/widget/default.scss       | 31 ++++++++++---------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/routes/product-widget/SelectProducts/index.tsx b/frontend/src/components/routes/product-widget/SelectProducts/index.tsx
index 8d5f27328..4a5ff048d 100644
--- a/frontend/src/components/routes/product-widget/SelectProducts/index.tsx
+++ b/frontend/src/components/routes/product-widget/SelectProducts/index.tsx
@@ -836,13 +836,13 @@ const SelectProducts = (props: SelectProductsProps) => {
                                                             return (
                                                                 <div key={addonId}
                                                                      className={classNames('hi-product-addon', addon.is_highlighted && 'hi-product-addon-highlighted')}>
+                                                                    {addon.is_highlighted && addon.highlight_message && (
+                                                                        <div className={'hi-product-addon-highlight-message'}>
+                                                                            {addon.highlight_message}
+                                                                        </div>
+                                                                    )}
                                                                     <div className={'hi-product-addon-title'}>
                                                                         {addon.title}
-                                                                        {addon.is_highlighted && addon.highlight_message && (
-                                                                            <span className={'hi-product-addon-highlight-message'}>
-                                                                                {addon.highlight_message}
-                                                                            </span>
-                                                                        )}
                                                                     </div>
                                                                     <TieredPricing
                                                                         productIndex={addonFormIndex}
diff --git a/frontend/src/styles/widget/default.scss b/frontend/src/styles/widget/default.scss
index df1022f28..cc62812f9 100644
--- a/frontend/src/styles/widget/default.scss
+++ b/frontend/src/styles/widget/default.scss
@@ -503,33 +503,34 @@
       }
 
       .hi-product-addon-title {
-        display: flex;
-        align-items: center;
-        gap: 8px;
         font-weight: 600;
         font-size: 13.5px;
         margin-bottom: 2px;
         overflow-wrap: anywhere;
       }
 
-      .hi-product-addon-highlight-message {
-        background: var(--hi-accent);
-        color: var(--hi-accent-contrast);
-        font-size: 10px;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        padding: 2px 8px;
-        border-radius: 999px;
-        white-space: nowrap;
-      }
-
       &.hi-product-addon-highlighted {
         margin-left: -10px;
         margin-right: -10px;
         padding: 8px 10px;
         border-radius: 10px;
+        border: 1px solid color-mix(in srgb, var(--hi-accent) 35%, transparent);
         background-color: var(--hi-soft-accent);
+        overflow: hidden;
+      }
+
+      .hi-product-addon-highlight-message {
+        background: var(--hi-accent);
+        color: var(--hi-accent-contrast);
+        font-size: 10.5px;
+        font-weight: 700;
+        line-height: 1.4;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        text-align: center;
+        overflow-wrap: anywhere;
+        padding: 4px 10px;
+        margin: -8px -10px 8px;
       }
 
       .hi-product-addon-description {