fixed cut names + hover tooltip

frontend/src/components/react/Search.tsx

@@ -129,8 +129,7 @@ export default function Search() {
         type="button"
         onClick={() => setOpen(true)}
         aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
-        title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
-        className="topbar-control tc-collapse-md"
+        className="topbar-control tc-collapse-md kbd-tip-host"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -146,6 +145,10 @@ export default function Search() {
           <path d="m21 21-4.3-4.3" />
         </svg>
         <span className="tc-label">Search</span>
+        <span className="kbd-tip" aria-hidden="true">
+          <kbd>{isMac ? '⌘' : 'Ctrl'}</kbd>
+          <kbd>K</kbd>
+        </span>
       </button>
 
       {open && (