Fix shortcut chip floating right in Cmd-J palette tip on Windows/Linux

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>
This commit is contained in:
brennanb2025
2026-06-08 16:42:03 -07:00
co-authored by Orca
parent 32d53d552e
commit e4092458c8
@@ -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>