diff --git a/static/css/components/userVignette.css b/static/css/components/userVignette.css
index 121869e2..b4f52f5f 100644
--- a/static/css/components/userVignette.css
+++ b/static/css/components/userVignette.css
@@ -28,11 +28,15 @@
justify-content: center;
font-weight: 700;
flex-shrink: 0;
- /* Default size = --sm; overridden by size modifier below */
- width: 24px;
- height: 24px;
+ /* Diameter comes from `--avatar-size`, declared per size variant on
+ the wrapper so the origin badge (a wrapper sibling or an avatar
+ child) can size off the same value. Default fallback is `--sm`. */
+ width: var(--avatar-size, 24px);
+ height: var(--avatar-size, 24px);
font-size: 10px;
- /* Anchor for the bottom-right `__origin` badge. */
+ /* Anchor for `__origin--overlay` (the avatar-only-mode badge that
+ sits on the bottom-right corner of the picture). Harmless when
+ no overlay child is present. */
position: relative;
}
@@ -66,45 +70,60 @@
/* ── Size variants ─────────────────────────────────────────────────────────── */
+/* `--avatar-size` is the single source of truth for the diameter. The
+ `__avatar` element reads it for width/height; the `__origin` badge
+ reads it (via the wrapper's inheritance scope) to scale itself to a
+ fixed proportion of the avatar regardless of variant. The avatar's
+ own `font-size` (used for initials) stays per-variant because the
+ initials-to-avatar ratio is a deliberate design choice, not a fixed
+ fraction. */
+
+.user-vignette--xs {
+ --avatar-size: 20px;
+}
.user-vignette--xs .user-vignette__avatar {
- width: 20px;
- height: 20px;
font-size: 9px;
}
+.user-vignette--sm {
+ --avatar-size: 24px;
+}
.user-vignette--sm .user-vignette__avatar {
- width: 24px;
- height: 24px;
font-size: 10px;
}
+.user-vignette--list {
+ --avatar-size: 36px;
+}
.user-vignette--list .user-vignette__avatar {
- width: 36px;
- height: 36px;
font-size: 13px;
}
+.user-vignette--md {
+ --avatar-size: 32px;
+}
.user-vignette--md .user-vignette__avatar {
- width: 32px;
- height: 32px;
font-size: 12px;
}
+.user-vignette--lg {
+ --avatar-size: 40px;
+}
.user-vignette--lg .user-vignette__avatar {
- width: 40px;
- height: 40px;
font-size: 15px;
}
+.user-vignette--menu {
+ --avatar-size: 38px;
+}
.user-vignette--menu .user-vignette__avatar {
- width: 38px;
- height: 38px;
font-size: 14px;
}
+.user-vignette--xl {
+ --avatar-size: 48px;
+}
.user-vignette--xl .user-vignette__avatar {
- width: 48px;
- height: 48px;
font-size: 17px;
}
@@ -141,9 +160,13 @@
/* ── Photo rendering ───────────────────────────────────────────────────────── */
/* When a photo is available the JS replaces the initials text with an .
- The avatar keeps its background color as a fallback while loading. */
+ The avatar keeps its background color as a fallback while loading.
+ The `:not(.user-vignette__origin)` carve-out excludes the overlay badge
+ (avatar-only mode) which is also an `.oxi-icon` inside `.__avatar`
+ after SVG conversion — without the carve-out it would inherit the
+ 100% / 100% sizing and fill the whole circle. */
.user-vignette__avatar img,
-.user-vignette__avatar .oxi-icon {
+.user-vignette__avatar .oxi-icon:not(.user-vignette__origin) {
width: 100%;
height: 100%;
object-fit: cover;
@@ -180,35 +203,49 @@
}
/* ── Origin badge (external-user marker) ───────────────────────────────────
- * Tiny FontAwesome icon overlaid on the bottom-right of the avatar circle.
- * Shown ONLY for external users — internal users render the bare avatar
+ * Inline-flex sibling rendered to the right of the avatar + name. Shown
+ * ONLY for external users — internal users render the bare vignette
* (Ed's "external only" preference: quiet UI for the common case).
*
- * The white background ring lifts the icon off coloured avatars so it
- * stays readable across the full palette. */
+ * Earlier iterations placed this inside `.__avatar` as an absolute-
+ * positioned corner badge. The corner approach failed once the avatar
+ * showed a user photo — the `` masked the badge out. Pulling it
+ * out to a sibling keeps it visible regardless of avatar content. */
.user-vignette__origin {
- position: absolute;
- /* Bottom-right corner, slightly tucked past the avatar's edge. */
- right: -2px;
- bottom: -2px;
- /* Scale to ~40% of avatar diameter via em — the parent's font-size
- changes per size variant, so the badge naturally tracks. */
- font-size: 0.9em;
+ flex-shrink: 0;
line-height: 1;
- background: var(--color-bg-surface);
- color: var(--color-text-secondary);
- border-radius: 50%;
- /* Halo ring so the icon visually detaches from coloured avatars. */
- box-shadow: 0 0 0 1.5px var(--color-bg-surface);
- /* Don't intercept hover events on the avatar itself. */
- pointer-events: auto;
+ /* Default (sibling mode, with name): track the avatar's font-size
+ so the badge matches the row's text scale. The overlay mode
+ overrides this below with the explicit 30%-of-avatar-diameter
+ rule. */
+ font-size: 1em;
}
.user-vignette__origin--external {
color: var(--color-warning-orange-text);
}
+/* Avatar-only renders (the user-menu toolbar button is the canonical
+ case) have no sibling row to anchor the badge against. The
+ `--overlay` modifier puts it on the bottom-right corner of the
+ picture at exactly 30% of the avatar diameter, regardless of size
+ variant. `--avatar-size` is declared per variant on the wrapper and
+ inherits to the badge via the cascade. Halo ring lifts the icon off
+ coloured avatars + the user's photo so it stays readable across the
+ palette. */
+.user-vignette__origin--overlay {
+ position: absolute;
+ right: -2px;
+ bottom: -2px;
+ /* `.oxi-icon` (the SVG that replaces the original ``) is
+ `width: 1em; height: 1em`, so font-size IS the rendered size. */
+ font-size: calc(var(--avatar-size, 24px) * 0.3);
+ background: var(--color-bg-surface);
+ border-radius: 50%;
+ box-shadow: 0 0 0 1.5px var(--color-bg-surface);
+}
+
.user-vignette__origin.hidden {
display: none;
}
diff --git a/static/js/components/pendingEmailVignette.js b/static/js/components/pendingEmailVignette.js
index a0c9e81d..3d1e8e51 100644
--- a/static/js/components/pendingEmailVignette.js
+++ b/static/js/components/pendingEmailVignette.js
@@ -49,14 +49,6 @@ export function createPendingEmailVignette(email, size = 'sm') {
const [local, domain] = trimmed.split('@');
const synthName = local && domain ? `${local[0]} ${domain[0]}` : trimmed.slice(0, 2);
avatar.textContent = _initials(synthName);
-
- // Forced external badge — this is the whole point of the component.
- const badge = document.createElement('i');
- badge.className = 'user-vignette__origin user-vignette__origin--external fa-solid fa-building-circle-xmark';
- badge.title = 'External invitation';
- badge.setAttribute('aria-hidden', 'true');
- avatar.appendChild(badge);
-
wrapper.appendChild(avatar);
// The "name" for a pending invite is just the email itself — there
@@ -66,5 +58,16 @@ export function createPendingEmailVignette(email, size = 'sm') {
nameEl.textContent = trimmed;
wrapper.appendChild(nameEl);
+ // Forced external badge — this is the whole point of the component.
+ // Lives as a sibling at the end of the wrapper (mirrors the
+ // userVignette layout) so it stays visible regardless of avatar
+ // content (initials today, possibly a photo in a future "saved
+ // email contact" mode).
+ const badge = document.createElement('i');
+ badge.className = 'user-vignette__origin user-vignette__origin--external fa-solid fa-building-circle-xmark';
+ badge.title = 'External invitation';
+ badge.setAttribute('aria-hidden', 'true');
+ wrapper.appendChild(badge);
+
return wrapper;
}
diff --git a/static/js/components/userVignette.js b/static/js/components/userVignette.js
index f6e0f6e0..1bee1e16 100644
--- a/static/js/components/userVignette.js
+++ b/static/js/components/userVignette.js
@@ -119,18 +119,6 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE
avatar.textContent = userId.slice(0, 2).toUpperCase();
wrapper.appendChild(avatar);
- // Origin badge (external-only — internal users render unchanged).
- // Created hidden; revealed once `getIsExternal` resolves to true.
- // FontAwesome glyph classes are added alongside the component
- // class so the icon renders as a building-with-x glyph.
- /** @type {HTMLElement | null} */
- const originEl = showOrigin ? document.createElement('i') : null;
- if (originEl) {
- originEl.className = 'user-vignette__origin user-vignette__origin--external hidden fa-solid fa-building-circle-xmark';
- originEl.setAttribute('aria-hidden', 'true');
- avatar.appendChild(originEl);
- }
-
/** @type {HTMLElement | null} */
const nameEl = showName ? document.createElement('span') : null;
@@ -157,11 +145,21 @@ export function createUserVignette(userId, size = 'sm', { showName = true, showE
// Resolve name, photo, email, and (when requested) is_external
// asynchronously. All four go through the systemUsers cache so a
// single fetch back-fills every facet.
+ //
+ // The origin badge (external-user marker) is created here only
+ // when `isExternal` is true — NOT pre-created hidden — because the
+ // global icon-replacement `MutationObserver` (core/icons.js) swaps
+ // every `` for an `