diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index e24e8954d8..c14a9ffe1a 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -323,6 +323,7 @@
     --right-sidebar-heading-left-spacing: 5px;
     --right-sidebar-avatar-width: 2em;
     --right-sidebar-avatar-height: var(--right-sidebar-avatar-width);
+    --right-sidebar-avatar-right-margin: 11px;
 
     /* Tippy popover related values */
     --navbar-popover-menu-min-width: 230px;
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index cb8b7e00ad..7259b84667 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -163,7 +163,7 @@
             position: relative;
             /* TODO: Express this as part of the grid on
                .selectable_sidebar_block. */
-            margin-right: 11px;
+            margin-right: var(--right-sidebar-avatar-right-margin);
 
             &:not(:has(.user-circle-offline)) .user-profile-picture {
                 /* The over-avatar user circle width is 15.5px at 20px/1em;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 5590706923..3817867fe6 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1001,7 +1001,7 @@ div.focused-message-list.is-conversation-view .recipient_row {
 .user_sidebar_entry.with_avatar .user-profile-picture {
     width: var(--right-sidebar-avatar-width);
     height: var(--right-sidebar-avatar-height);
-    margin-right: 11px;
+    margin-right: var(--right-sidebar-avatar-right-margin);
 }
 
 .home-error-bar {