fixed top bar height issues and other styling

frontend/src/components/react/Search.tsx

@@ -130,13 +130,10 @@ export default function Search() {
         onClick={() => setOpen(true)}
         aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
         title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
-        className="text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors flex items-center gap-2 px-2 py-1 hover:bg-[var(--surface0)]/60 font-display italic"
-        style={{ borderRadius: 1 }}
+        className="topbar-control"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width="18"
-          height="18"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -148,7 +145,8 @@ export default function Search() {
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.3-4.3" />
         </svg>
-        <kbd className="hidden md:inline-flex items-center gap-1 text-[10px] font-mono text-[var(--subtext0)] px-1.5 py-0.5 border border-[var(--surface2)] bg-[var(--surface0)]/60" style={{ borderRadius: 1 }}>
+        <span>Search</span>
+        <kbd className="hidden md:inline-flex">
           <span>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
         </kbd>
       </button>
@@ -169,7 +167,7 @@ export default function Search() {
             className="relative w-full max-w-xl bg-[var(--base)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
             style={{
               borderRadius: 2,
-              boxShadow: '0 30px 60px -20px rgba(20,16,12,0.55), 0 8px 20px -8px rgba(20,16,12,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',
+              boxShadow: '0 30px 60px -20px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',
             }}
             onClick={e => e.stopPropagation()}
           >
@@ -237,8 +235,8 @@ export default function Search() {
                           <div className={`font-display italic truncate text-lg leading-tight pr-2 flex items-baseline gap-2 ${active ? 'text-[var(--mauve)]' : 'text-[var(--text)]'}`} style={{ paddingInlineEnd: '0.35em' }}>
                             <span className="truncate">{title}</span>
                             {p.draft && (
-                              <span className="text-[9px] font-sans not-italic uppercase tracking-[0.2em] text-[var(--peach)] border border-[var(--peach)]/60 px-1.5 py-0.5 shrink-0" style={{ borderRadius: 1 }}>
-                                Draft
+                              <span className="chip chip-draft shrink-0 !text-[0.62rem] !py-0">
+                                Sketch
                               </span>
                             )}
                           </div>