heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(profile): override avatar circle force via && self-doubled selector instead of source-order-dependent !important double-up

Browse source
This commit is contained in:
heaven 2026-05-11 02:00:12 +03:00
parent 117bb9fba4
commit 2bbaf4dfcf
1 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/app/components/user-profile/styles.css.ts
View file

@ -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({