From e4092458c8e4d8ca14cede630a3a2a4f9dfcfe2c Mon Sep 17 00:00:00 2001
From: brennanb2025 <brennankbenson@gmail.com>
Date: Mon, 8 Jun 2026 16:42:03 -0700
Subject: [PATCH] Fix shortcut chip floating right in Cmd-J palette tip on
 Windows/Linux
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Cmd-J palette feature tip rendered its title and shortcut chip as
flex siblings (inline-flex + md:flex-nowrap, chip shrink-0). With a wide
label like Ctrl+Shift+J the row overflowed, so the title text shrank to
two lines while the fixed-width chip floated to the right edge, vertically
centered — detached from the sentence. The compact Mac label (⌘⇧J) fit, so
the bug only showed on Windows/Linux.

Render the chip as inline text in the title instead of a flex item: short
labels stay on one line, wide labels wrap to the next line under the title
rather than floating right. whitespace-nowrap keeps the chip from breaking
internally; align-middle keeps it aligned with the heading text.

Co-authored-by: Orca <help@stably.ai>
---
 .../feature-tips/CmdJPaletteTipDialog.tsx     | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/renderer/src/components/feature-tips/CmdJPaletteTipDialog.tsx b/src/renderer/src/components/feature-tips/CmdJPaletteTipDialog.tsx
index 27aceab5de5..447ecf1609e 100644
--- a/src/renderer/src/components/feature-tips/CmdJPaletteTipDialog.tsx
+++ b/src/renderer/src/components/feature-tips/CmdJPaletteTipDialog.tsx
@@ -66,16 +66,21 @@ export function CmdJPaletteTipDialog({
               >
                 {tip.eyebrow.toUpperCase()}
               </Badge>
+              {/* Why: flow the shortcut chip as inline text (not a flex item) so the
+                  short Mac label (⌘⇧J) stays on one line, while a wide label like
+                  "Ctrl+Shift+J" wraps to the next line only when it doesn't fit —
+                  instead of being pushed to the right edge on Win/Linux. */}
               <DialogTitle className="text-2xl font-semibold leading-tight tracking-tight md:text-[1.75rem]">
-                <span className="inline-flex flex-wrap items-center gap-x-2.5 gap-y-1 md:flex-nowrap">
-                  <span>{titlePrefix.trimEnd()}</span>
-                  {displayShortcutLabel ? (
-                    <kbd className="inline-flex shrink-0 items-center rounded-md border border-border bg-card px-2 py-0.5 font-mono text-base font-medium text-foreground">
+                {titlePrefix.trimEnd()}
+                {displayShortcutLabel ? (
+                  <>
+                    {' '}
+                    <kbd className="ml-0.5 inline-flex items-center whitespace-nowrap rounded-md border border-border bg-card px-2 py-0.5 align-middle font-mono text-base font-medium text-foreground">
                       {displayShortcutLabel}
                     </kbd>
-                  ) : null}
-                  {titleSuffix ? <span>{titleSuffix}</span> : null}
-                </span>
+                  </>
+                ) : null}
+                {titleSuffix ? ` ${titleSuffix}` : null}
               </DialogTitle>
               <DialogDescription className="mt-3 max-w-2xl space-y-3 text-sm leading-relaxed">
                 <span className="block">{tip.description}</span>