From 57f510ad3d07883e5d59a743cd124497e3bc2d8c Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 8 Apr 2026 21:46:27 +0200
Subject: [PATCH] fix: keep keyboard hints on a single line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/components/KeyboardHints.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/KeyboardHints.tsx b/frontend/src/components/KeyboardHints.tsx
index 084b72c..7cc9426 100644
--- a/frontend/src/components/KeyboardHints.tsx
+++ b/frontend/src/components/KeyboardHints.tsx
@@ -30,13 +30,15 @@ export function KeyboardHints() {
     // inside the main column in App.tsx so it isn't offset by the
     // sidebar widths.
     <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) => (
           <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">
               {hint.key}
             </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 && (
               <span className="ml-1 text-text-faint">•</span>
             )}
@@ -45,7 +47,7 @@ export function KeyboardHints() {
         {selectedCount > 0 && (
           <>
             <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
             </span>
           </>