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/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"