From 2bbaf4dfcf28f6f682889ffae3bba5bfa2dece7c Mon Sep 17 00:00:00 2001 From: heaven Date: Mon, 11 May 2026 02:00:12 +0300 Subject: [PATCH] fix(profile): override avatar circle force via && self-doubled selector instead of source-order-dependent !important double-up --- src/app/components/user-profile/styles.css.ts | 22 ++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts index 3d74b481..2fbe79c1 100644 --- a/src/app/components/user-profile/styles.css.ts +++ b/src/app/components/user-profile/styles.css.ts @@ -92,16 +92,28 @@ export const HeroAvatarButton = style({ // server-side 1:1 avatar shows full-bleed without cropping, and the // rest of the card stays in flow below. Replaces the legacy full-pane // avatar swap which hid the name / presence / info rows entirely. -// `border-radius: !important` is mandatory: the global override in -// `components/user-avatar/UserAvatar.css.ts` uses `!important` to -// force every avatar parent to 50%, so without matching specificity -// the expanded square would render as a huge circle. +// +// `&&` self-doubled selector + `!important` for `border-radius` is +// the override pattern for the global avatar-circle force in +// `components/user-avatar/UserAvatar.css.ts:23-25`, which uses +// `*:has(> .UserAvatar) { border-radius: 50% !important }` to round +// every avatar parent. A single-class override + `!important` would +// be source-order dependent (both rules carry `!important`, so the +// cascade falls to specificity). `&&` emits +// `.HeroAvatarExpanded.HeroAvatarExpanded` which doubles class +// specificity and beats the single-class selector inside the +// global `:has()`, so we win regardless of which CSS module the +// bundler emits first. export const HeroAvatarExpanded = style({ width: '100%', height: 'auto', aspectRatio: '1 / 1', - borderRadius: `${toRem(16)} !important`, boxShadow: 'none', + selectors: { + '&&': { + borderRadius: `${toRem(16)} !important`, + }, + }, }); export const HeroAvatarButtonExpanded = style({