From a22b295dbd33f44597fa8fbaf9207679ec2b91f9 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Fri, 4 Sep 2026 12:43:43 -0500
Subject: [PATCH] fix(desktop): paint every line of a multi-line tooltip, not
 just the first
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tip's chip is an inline span with `box-decoration-break: clone`, so its
background only paints the line boxes of inline flow. The #62022 hardening
forced every label child to `inline-flex`, which is an atomic inline: it sits
on the baseline and hangs any extra lines below the chip, dark-on-dark. The
preview status row's two-line label (target path + click hint) showed the
path lit and the hint invisible, and long paths wrapped into unreadable rows.

Force label children `inline` instead — still no block collapse, and wrapped
content stays in flow. TipHintLabel and the preview row drop their flex
boxes for plain inline text (a `<br />` for the hard break).
---
 .../composer/status-stack/preview-row.tsx     | 12 ++++++----
 apps/desktop/src/components/ui/tooltip.tsx    | 23 ++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/apps/desktop/src/app/chat/composer/status-stack/preview-row.tsx b/apps/desktop/src/app/chat/composer/status-stack/preview-row.tsx
index 22aef09d86..13d3794c52 100644
--- a/apps/desktop/src/app/chat/composer/status-stack/preview-row.tsx
+++ b/apps/desktop/src/app/chat/composer/status-stack/preview-row.tsx
@@ -121,12 +121,14 @@ export const PreviewStatusRow = memo(function PreviewStatusRow({ item, onDismiss
     >
       <Tip
         label={
-          // inline-flex (not flex): a block child collapses Tip's decoration
-          // wrapper geometry and mis-positions the tooltip (#62022).
-          <span className="inline-flex flex-col gap-0.5">
-            <span>{item.target}</span>
+          // Inline flow with a hard break, not a flex column: Tip's background
+          // only wraps inline content, so a flex box would light the first
+          // line and leave the rest dark-on-dark.
+          <>
+            {item.target}
+            <br />
             <span className="opacity-70">{t.preview.linkHint}</span>
-          </span>
+          </>
         }
       >
         <span className="min-w-0 truncate text-[0.73rem] leading-4 text-foreground/92">{item.label}</span>
diff --git a/apps/desktop/src/components/ui/tooltip.tsx b/apps/desktop/src/components/ui/tooltip.tsx
index 74d498adb7..616a5e6e27 100644
--- a/apps/desktop/src/components/ui/tooltip.tsx
+++ b/apps/desktop/src/components/ui/tooltip.tsx
@@ -117,11 +117,12 @@ function TooltipContent({
         {/* bg-foreground/text-background auto-inverts per theme. leading-normal
             keeps lines readable; py-1 makes the cloned line-boxes overlap just
             enough to read as one continuous fill (no gaps between lines). */}
-        {/* [&>*]:!inline-flex: a block-level label child (e.g. `flex`) collapses
-            this inline decoration's geometry, so Radix measures a zero-size chip
-            and parks an empty rectangle in the corner (#62022). Force any direct
-            child inline-flex so every call site stays safe. */}
-        <span className="box-decoration-clone inline bg-foreground px-1.5 py-1 text-[11px] font-bold leading-normal text-background [font-family:Arial,sans-serif] [&>*]:!inline-flex">
+        {/* [&>*]:!inline: this decoration only paints inline FLOW. A block child
+            collapses it to zero and Radix parks an empty chip in the corner
+            (#62022); an atomic inline child (`inline-flex`) sits on the baseline
+            and hangs its extra lines below the background, dark-on-dark. Force
+            direct children inline; break lines with `<br />`. */}
+        <span className="box-decoration-clone inline bg-foreground px-1.5 py-1 text-[11px] font-bold leading-normal text-background [font-family:Arial,sans-serif] [&>*]:!inline">
           {children}
         </span>
       </TooltipPrimitive.Content>
@@ -265,8 +266,8 @@ interface TipHintLabelProps {
   hint?: string
 }
 
-/** Tooltip label with an optional trailing hotkey hint. Uses `inline-flex` so it
- *  stays safe inside Tip's decoration wrapper — prefer this over a bespoke
+/** Tooltip label with an optional trailing hotkey hint. Plain inline flow (no
+ *  flex box) so Tip's per-line background wraps it — prefer this over a bespoke
  *  flex/gap span at the call site (see #62022). */
 function TipHintLabel({ text, hint }: TipHintLabelProps) {
   if (!hint) {
@@ -274,10 +275,10 @@ function TipHintLabel({ text, hint }: TipHintLabelProps) {
   }
 
   return (
-    <span className="inline-flex items-center gap-2">
-      <span>{text}</span>
-      <span className="opacity-55">{hint}</span>
-    </span>
+    <>
+      {text}
+      <span className="ms-2 opacity-55">{hint}</span>
+    </>
   )
 }