From 7e25b9d7fa6c58ca4b18e76b27f62fc7e1462640 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 28 Oct 2026 11:01:55 +0100
Subject: [PATCH] fix: keep the mail search placeholder short and show the /
 shortcut as a key cap so it isn't cut off

---
 .../search/__tests__/search-box.test.tsx      | 19 +++++++++++++++++++
 components/search/search-box.tsx              | 15 +++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/components/search/__tests__/search-box.test.tsx b/components/search/__tests__/search-box.test.tsx
index eecbeb989..061e54f7f 100644
--- a/components/search/__tests__/search-box.test.tsx
+++ b/components/search/__tests__/search-box.test.tsx
@@ -264,3 +264,22 @@ describe('SearchBox draft', () => {
     expect(input().value).toBe('from:alice');
   });
 });
+
+// At 1440 the list column cut "Search mail... (press /)" to "Search mail...
+// (pres". The placeholder is short now; the "/" shortcut shows as a key cap
+// at the end of the empty field and is named for assistive tech.
+describe('SearchBox shortcut hint', () => {
+  it('keeps the placeholder short and shows the / key apart', () => {
+    const { container } = render(<Harness />);
+    expect(input().getAttribute('placeholder')).toBe('search_placeholder');
+    expect(input().getAttribute('aria-keyshortcuts')).toBe('/');
+    const kbd = container.querySelector('kbd');
+    expect(kbd?.textContent).toBe('/');
+    expect(kbd?.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('drops the key cap once something is typed', () => {
+    const { container } = render(<Harness initial="invoice" />);
+    expect(container.querySelector('kbd')).toBeNull();
+  });
+});
diff --git a/components/search/search-box.tsx b/components/search/search-box.tsx
index 02f8c96aa..1ecc25282 100644
--- a/components/search/search-box.tsx
+++ b/components/search/search-box.tsx
@@ -147,7 +147,10 @@ export function SearchBox({ value, onChange, onSubmit, onClear, onSelectContact,
         <Input
           type="search"
           autoFocus={autoFocus}
-          placeholder={placeholder ?? t(touch ? "search_placeholder" : "search_placeholder_hint")}
+          // Short, so a narrow list column doesn't cut it; the "/" shortcut
+          // shows as a key cap below instead of in the text.
+          placeholder={placeholder ?? t("search_placeholder")}
+          aria-keyshortcuts={touch ? undefined : "/"}
           value={draft}
           onChange={(e) => {
             setDraft(e.target.value);
@@ -166,7 +169,7 @@ export function SearchBox({ value, onChange, onSubmit, onClear, onSelectContact,
             close();
           }}
           onKeyDown={handleKeyDown}
-          className={cn("ps-9 h-9 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none", draft && "pe-8")}
+          className={cn("peer ps-9 h-9 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none", draft ? "pe-8" : !touch && "pe-8")}
           role="combobox"
           aria-expanded={showDropdown}
           aria-controls={listId}
@@ -178,6 +181,14 @@ export function SearchBox({ value, onChange, onSubmit, onClear, onSelectContact,
           disabled={disabled}
           title={title}
         />
+        {!draft && !touch && (
+          <kbd
+            aria-hidden="true"
+            className="pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 rounded border border-border px-1.5 font-sans text-[11px] leading-4 text-muted-foreground peer-focus:hidden"
+          >
+            /
+          </kbd>
+        )}
         {draft && (
           <button
             type="button"