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/AppHeader.tsx

@@ -159,8 +159,8 @@ export function AppHeader(
         <nav className="app-header-nav">
           {
             /* The user's own links lead the row, so the icons after them run
-              unbroken to the "+". CSS shows the text links or the avatar's
-              menu, by width. */
+              unbroken to the "+": the text links on wide screens, then the
+              avatar's menu at every width. */
           }
           {user && (
             <>
@@ -178,9 +178,7 @@ export function AppHeader(
                   <Trans>Playlists</Trans>
                 </Link>
               </div>
-              <div className="nav-compact">
-                <UserMenu user={user} />
-              </div>
+              <UserMenu user={user} />
             </>
           )}
           <button

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>

src/components/profile/ProfileHeader.tsx

@@ -7,7 +7,6 @@
 
 import { useRef, useState } from "react";
 import { Link } from "react-router";
-import { can } from "../../utils/auth/permissions.ts";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { API_URL } from "../../config/api.ts";
@@ -36,13 +35,13 @@ export interface ProfileHeaderProps {
 /**
  * Renders the avatar, username, role and inviter. Visitors get a follow
  * button. On their own profile, users change their avatar
- * (`PUT /api/me/avatar`) and email, invite someone, reach their settings (and
- * the site's tools, with `category:manage`) and log out.
+ * (`PUT /api/me/avatar`) and email, and invite someone; their settings, the
+ * site's tools and logging out are in the header's avatar menu.
  */
 export function ProfileHeader(
   { user, isOwnProfile, onUserChange }: ProfileHeaderProps,
 ): React.JSX.Element {
-  const { user: me, authFetch, updateSession, logout } = useAuth();
+  const { user: me, authFetch, updateSession } = useAuth();
   const [uploading, setUploading] = useState(false);
   const [avatarError, setAvatarError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -170,25 +169,7 @@ export function ProfileHeader(
             targetUsername={user.username}
           />
         )}
-        {isOwnProfile && (
-          <ProfileOwnActions>
-            <Link to="/settings" className="btn-border">
-              <Trans>Settings</Trans>
-            </Link>
-            {can(me, "category:manage") && (
-              <Link to="/manage" className="btn-border">
-                <Trans>Manage</Trans>
-              </Link>
-            )}
-            <button
-              type="button"
-              className="btn-border btn-border--danger"
-              onClick={logout}
-            >
-              <Trans>Log out</Trans>
-            </button>
-          </ProfileOwnActions>
-        )}
+        {isOwnProfile && <ProfileOwnActions />}
       </div>
     </div>
   );

src/components/profile/ProfileOwnActions.tsx

@@ -1,6 +1,6 @@
 /**
- * Renders the actions of the signed-in user's own profile header, which invite
- * someone, beside the log out button the header adds.
+ * Renders the action of the signed-in user's own profile header, which invites
+ * someone.
  *
  * @module
  */
@@ -14,13 +14,10 @@ import { useHeightTransition } from "../../hooks/shared/useHeightTransition.ts";
 import { ErrorCard } from "../shared/ErrorCard.tsx";
 
 /**
- * Renders the "Invite someone" button, then `children`, the log out button.
- * Each opening of the panel creates a new single-use invite link, for
- * `/register`.
+ * Renders the "Invite someone" button, which opens a panel with an invite link.
+ * Each opening of the panel creates a new single-use link, for `/register`.
  */
-export function ProfileOwnActions(
-  { children }: { children: React.ReactNode },
-): React.JSX.Element {
+export function ProfileOwnActions(): React.JSX.Element {
   const { authFetch } = useAuth();
   const [inviteUrl, setInviteUrl] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
@@ -69,18 +66,15 @@ export function ProfileOwnActions(
 
   return (
     <div className="profile-own-actions" ref={ref}>
-      <div className="profile-own-actions-row">
-        <button
-          type="button"
-          className="invite-btn"
-          onClick={toggle}
-          disabled={pending}
-          aria-expanded={inviteUrl !== null}
-        >
-          <Trans>+ Invite someone</Trans>
-        </button>
-        {children}
-      </div>
+      <button
+        type="button"
+        className="invite-btn"
+        onClick={toggle}
+        disabled={pending}
+        aria-expanded={inviteUrl !== null}
+      >
+        <Trans>+ Invite someone</Trans>
+      </button>
       {inviteUrl && (
         <div
           className="invite-panel animate-in"