From ece9e922e37f63e162344b6becace3a12c13ee15 Mon Sep 17 00:00:00 2001 From: heaven Date: Wed, 6 May 2026 16:19:47 +0300 Subject: [PATCH] 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 --- src/app/components/user-profile/styles.css.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts index 62272a2e..bcc59d50 100644 --- a/src/app/components/user-profile/styles.css.ts +++ b/src/app/components/user-profile/styles.css.ts @@ -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 ``, 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',