fix(user-profile): round the avatar surface plate and replace its outline with a box-shadow ring so corners no longer poke past the circle

This commit is contained in:
v.lagerev 2026-05-06 16:19:47 +03:00
parent 21fe3039c4
commit 14a28873ee

View file

@ -36,9 +36,16 @@ export const UserAvatarContainer = style({
top: 0,
transform: 'translateY(-50%)',
backgroundColor: color.Surface.Container,
// Surface plate that punches through the cover banner — sits one DOM level
// above the folds `<Avatar>`, so the global circle override on `.UserAvatar`
// (commit ead1290) does not reach it. Round it explicitly to match.
borderRadius: '50%',
});
export const UserHeroAvatar = style({
outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
// boxShadow rather than outline — `outline` ignores `border-radius`, so it
// would draw a square ring around the circular avatar (the global circle
// override lives in `user-avatar/UserAvatar.css.ts` since commit ead1290).
boxShadow: `0 0 0 ${config.borderWidth.B600} ${color.Surface.Container}`,
selectors: {
'button&': {
cursor: 'pointer',