mirror of
https://github.com/stablyai/orca.git
synced 2026-10-16 08:03:09 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user