fix: keep keyboard hints on a single line

Add whitespace-nowrap to the hints pill container plus the action and
selection-count spans so labels like "Pick → heap" and "1 selected"
no longer break across rows. The pill is an absolute overlay with no
width constraint, so growing horizontally is fine.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-08 21:46:27 +02:00
parent 26424469db
commit 57f510ad3d

View File

@@ -30,13 +30,15 @@ export function KeyboardHints() {
// inside the main column in App.tsx so it isn't offset by the // inside the main column in App.tsx so it isn't offset by the
// sidebar widths. // sidebar widths.
<div className="pointer-events-none absolute bottom-4 left-1/2 z-30 -translate-x-1/2"> <div className="pointer-events-none absolute bottom-4 left-1/2 z-30 -translate-x-1/2">
<div className="pointer-events-auto flex items-center gap-3 rounded-full border border-border/60 bg-surface/40 px-4 py-1.5 shadow-lg ring-1 ring-white/5 backdrop-blur-md"> <div className="pointer-events-auto flex items-center gap-3 whitespace-nowrap rounded-full border border-border/60 bg-surface/40 px-4 py-1.5 shadow-lg ring-1 ring-white/5 backdrop-blur-md">
{hints.map((hint, i) => ( {hints.map((hint, i) => (
<div key={i} className="flex items-center gap-1.5"> <div key={i} className="flex items-center gap-1.5">
<kbd className="rounded bg-surface-offset/80 px-1.5 py-0.5 text-[11px] font-medium text-text"> <kbd className="rounded bg-surface-offset/80 px-1.5 py-0.5 text-[11px] font-medium text-text">
{hint.key} {hint.key}
</kbd> </kbd>
<span className="text-xs text-text-muted">{hint.action}</span> <span className="whitespace-nowrap text-xs text-text-muted">
{hint.action}
</span>
{i < hints.length - 1 && ( {i < hints.length - 1 && (
<span className="ml-1 text-text-faint"></span> <span className="ml-1 text-text-faint"></span>
)} )}
@@ -45,7 +47,7 @@ export function KeyboardHints() {
{selectedCount > 0 && ( {selectedCount > 0 && (
<> <>
<span className="text-text-faint"></span> <span className="text-text-faint"></span>
<span className="text-xs font-medium text-primary"> <span className="whitespace-nowrap text-xs font-medium text-primary">
{selectedCount} selected {selectedCount} selected
</span> </span>
</> </>