diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index aa923c0685..a593737153 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -262,6 +262,8 @@
     --left-sidebar-width: min(33.3333%, var(--left-sidebar-max-width));
     /* 40px (toggle icon) + 5px (gap) + 20px logo + 10px right margin */
     --left-sidebar-width-with-realm-icon-logo: 75px;
+    /* 50px per icon * 4 icons + 3px space (legacy) = 203px at 20px/1em */
+    --right-column-collapsed-sidebar-width: 10.15em;
     /* 288px at 14px/1em */
     --right-column-max-width: 20.57em;
     --right-column-width: clamp(10em, 50%, var(--right-column-max-width));
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index d5d9ba371b..3774cf8016 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1594,11 +1594,13 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
         @extend %hide-right-sidebar;
     }
 
-    &.fluid_layout_width {
-        #compose-content,
-        .app-main .column-middle {
-            margin-right: 7px;
-        }
+    #navbar-middle {
+        margin-right: var(--right-column-collapsed-sidebar-width);
+    }
+
+    #compose-content,
+    .app-main .column-middle {
+        margin-right: 7px;
     }
 }
 
@@ -1715,7 +1717,7 @@ body:not(.hide-left-sidebar) {
 @container header-container (width < $cq_xl_min) {
     #navbar-middle {
         /* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
-        margin-right: calc(var(--header-height) * 4 + 3px);
+        margin-right: var(--right-column-collapsed-sidebar-width);
     }
 }