fixed top bar height issues and other styling

frontend/src/components/react/LogoutButton.tsx

@@ -22,12 +22,10 @@ export default function LogoutButton() {
       disabled={busy}
       title="Sign out"
       aria-label="Sign out"
-      className="text-subtext0 hover:text-red transition-colors p-1.5 rounded-md hover:bg-surface0/60 disabled:opacity-50"
+      className="topbar-control topbar-control--danger"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -40,6 +38,7 @@ export default function LogoutButton() {
         <polyline points="16 17 21 12 16 7" />
         <line x1="21" x2="9" y1="12" y2="12" />
       </svg>
+      <span>{busy ? 'Signing out…' : 'Sign out'}</span>
     </button>
   );
 }