v4: the avatar menu shows at every width and holds Log out, so a profile keeps only Invite; the profile's dump cards lay out again — your own profile had four buttons in a row, Invite someone, Settings, Manage and Log out, Invite taller than the rest, and on wide screens it was the only way to reach /settings or /manage. The avatar menu now leads the header's icon row at every width, after the name and Playlists text links on wide screens, and ends with Log out under a separator, muted until hovered. The profile keeps Invite someone alone. The menu's button outweighs .app-header-nav button and the themes' button rules (Brutalist and GeoCities list it among their flat buttons), so it reads as one of the menu's links. Since b9ff9c4, a card under 472px is laid out by the narrow-card container query, but the profile columns' dense-card rules still placed the thumb, body and vote themselves, more specifically: the thumb lost its row span, so the title fell under it and every card was a tall, mostly empty box. Those rules now only make the card denser (a smaller thumb, a 2-line title, smaller type) and leave placement to the container query. 670 frontend tests pass, and tsc, eslint, deno fmt, doc:lint and i18n:compile --strict are clean; checked in screenshots in Smooth dark at 1400 and 390px, Brutalist light at 390px, GeoCities light and Kanagawa dark at 1400px, in French.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/layout/UserMenu.tsx

@@ -1,6 +1,7 @@
 /**
- * Renders the avatar menu that replaces the header's profile and playlists
- * links on small screens, and leads to the settings and the site's tools.
+ * Renders the avatar menu that leads the header's icon row at every width: it
+ * holds the profile and playlists links (on small screens, the only ones), the
+ * settings, the site's tools, and logging out.
  *
  * @module
  */
@@ -13,6 +14,7 @@ import { Avatar } from "../shared/Avatar.tsx";
 import type { SelfUser } from "../../../shared/user.ts";
 import { can } from "../../utils/auth/permissions.ts";
 import { userPath } from "../../../shared/paths.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
 
 /** Passed to {@link UserMenu} by `AppHeader`, for a signed-in user. */
 export interface UserMenuProps {
@@ -21,10 +23,12 @@ export interface UserMenuProps {
 
 /**
  * Renders the signed-in user's avatar, which opens a menu with links to their
- * profile, their playlists and `/settings`, and to `/manage` for those who
- * hold `category:manage`. A click outside or Escape closes it.
+ * profile, their playlists and `/settings`, to `/manage` for those who hold
+ * `category:manage`, and a Log out button. A click outside or Escape closes
+ * it.
  */
 export function UserMenu({ user }: UserMenuProps): React.JSX.Element {
+  const { logout } = useAuth();
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -98,6 +102,18 @@ export function UserMenu({ user }: UserMenuProps): React.JSX.Element {
               <Trans>Manage</Trans>
             </Link>
           )}
+          <div className="user-menu-separator" role="separator" />
+          <button
+            type="button"
+            className="user-menu-item user-menu-item--logout"
+            role="menuitem"
+            onClick={() => {
+              setOpen(false);
+              logout();
+            }}
+          >
+            <Trans>Log out</Trans>
+          </button>
         </div>
       )}
     </div>