redesign

frontend/src/components/react/Search.tsx

@@ -130,7 +130,7 @@ export default function Search() {
         onClick={() => setOpen(true)}
         aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
         title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
-        className="topbar-control"
+        className="topbar-control tc-collapse-md"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -145,8 +145,8 @@ export default function Search() {
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.3-4.3" />
         </svg>
-        <span>Search</span>
-        <kbd className="hidden md:inline-flex">
+        <span className="tc-label">Search</span>
+        <kbd className="tc-kbd">
           <span>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
         </kbd>
       </button>