From 85aac4ff649ecfe36f90aad04f16e867b11f7fd8 Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 16 Mar 2026 15:07:37 -0400 Subject: [PATCH 1/2] fix(sidebar): center notification dot on avatar corner The dot badge (8px circle) was positioned at top:-2px, left:-2px which placed its CENTER 2px inside the avatar corner rather than on the corner itself. Changed to top:-4px, left:-4px so the dot is centered exactly on the top-left corner of the avatar, matching how the count badge (top:-6px for ~12px height) is positioned. Also updated the folder compound variant dot position from +2px to 0px for consistency. Fixes #293 --- src/app/components/sidebar/Sidebar.css.ts | 8 ++++---- src/app/pages/client/sidebar/DirectDMsList.tsx | 2 +- src/app/pages/client/sidebar/DirectTab.tsx | 2 +- src/app/pages/client/sidebar/HomeTab.tsx | 2 +- src/app/pages/client/sidebar/SpaceTabs.tsx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/app/components/sidebar/Sidebar.css.ts b/src/app/components/sidebar/Sidebar.css.ts index b96307ae0..457ceecbe 100644 --- a/src/app/components/sidebar/Sidebar.css.ts +++ b/src/app/components/sidebar/Sidebar.css.ts @@ -134,8 +134,8 @@ export const SidebarItemBadge = recipe({ left: toRem(-6), }, false: { - top: toRem(-2), - left: toRem(-2), + top: toRem(-4), + left: toRem(-4), }, }, }, @@ -167,9 +167,9 @@ export const SidebarItemBadge = recipe({ style: { selectors: { 'div:has(> button[data-id]) &': { - top: toRem(2), + top: toRem(0), left: 'auto', - right: toRem(2), + right: toRem(0), }, }, }, diff --git a/src/app/pages/client/sidebar/DirectDMsList.tsx b/src/app/pages/client/sidebar/DirectDMsList.tsx index f2573b611..14d93eb74 100644 --- a/src/app/pages/client/sidebar/DirectDMsList.tsx +++ b/src/app/pages/client/sidebar/DirectDMsList.tsx @@ -141,7 +141,7 @@ function DMItem({ room, selected }: DMItemProps) { 0} style={{ - left: unread.total > 0 ? toRem(-6) : toRem(-2), + left: unread.total > 0 ? toRem(-6) : toRem(-4), right: 'auto', }} > diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx index 3503c7f92..a1ff6ff58 100644 --- a/src/app/pages/client/sidebar/DirectTab.tsx +++ b/src/app/pages/client/sidebar/DirectTab.tsx @@ -118,7 +118,7 @@ export function DirectTab() { 0} style={{ - left: directUnread.total > 0 ? toRem(-6) : toRem(-2), + left: directUnread.total > 0 ? toRem(-6) : toRem(-4), right: 'auto', }} > diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx index 611957f33..7401e4233 100644 --- a/src/app/pages/client/sidebar/HomeTab.tsx +++ b/src/app/pages/client/sidebar/HomeTab.tsx @@ -112,7 +112,7 @@ export function HomeTab() { 0} style={{ - left: homeUnread.total > 0 ? toRem(-6) : toRem(-2), + left: homeUnread.total > 0 ? toRem(-6) : toRem(-4), right: 'auto', }} > diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx index a758cc1f8..670f60b84 100644 --- a/src/app/pages/client/sidebar/SpaceTabs.tsx +++ b/src/app/pages/client/sidebar/SpaceTabs.tsx @@ -468,7 +468,7 @@ function SpaceTab({ 0} style={{ - left: unread.total > 0 ? toRem(-6) : toRem(-2), + left: unread.total > 0 ? toRem(-6) : toRem(-4), right: 'auto', }} > @@ -609,7 +609,7 @@ function ClosedSpaceFolder({ 0} style={{ - left: unread.total > 0 ? toRem(-6) : toRem(-2), + left: unread.total > 0 ? toRem(-6) : toRem(-4), right: 'auto', }} > From bbec983eb60b3cd3995440f65ed02364169551dc Mon Sep 17 00:00:00 2001 From: Evie Gauthier Date: Mon, 16 Mar 2026 15:28:37 -0400 Subject: [PATCH 2/2] chore: add changeset --- .changeset/fix-notification-dot-alignment.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fix-notification-dot-alignment.md diff --git a/.changeset/fix-notification-dot-alignment.md b/.changeset/fix-notification-dot-alignment.md new file mode 100644 index 000000000..3896b3b17 --- /dev/null +++ b/.changeset/fix-notification-dot-alignment.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fix notification dot badge appearing off-center on sidebar avatars