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