diff --git a/web/src/topic_list.ts b/web/src/topic_list.ts
index 0673bdeca6..7fc84fa68e 100644
--- a/web/src/topic_list.ts
+++ b/web/src/topic_list.ts
@@ -338,7 +338,7 @@ export function initialize({
 }): void {
     $("#stream_filters").on(
         "click",
-        ".sidebar-topic-check, .sidebar-topic-name, .topic-markers-and-controls",
+        ".sidebar-topic-check, .sidebar-topic-name, .topic-markers-and-unreads",
         (e) => {
             if (e.metaKey || e.ctrlKey || e.shiftKey) {
                 return;
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 69418d084b..cdc6b8851e 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -227,6 +227,7 @@
     --left-sidebar-icon-content-gap: 0.4375em;
     /* The space allotted in gridded rows for the toggle icon. */
     --left-sidebar-header-icon-toggle-width: 20px;
+    --left-sidebar-vdots-width: 26px;
     /* Other rows need an offset to preserve a column the
        entire height of the left sidebar for where toggles sit. */
     --left-sidebar-toggle-width-offset: var(
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index a1df980620..0088516f96 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -26,7 +26,7 @@
 }
 
 .sidebar-topic-check,
-.topic-markers-and-controls {
+.topic-markers-and-unreads {
     cursor: pointer;
 }
 
@@ -177,7 +177,10 @@
 #direct-messages-section-header {
     grid-template-columns:
         0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 1fr)
-        max-content 30px 0;
+        minmax(0, max-content) minmax(0, max-content) var(
+            --left-sidebar-vdots-width
+        )
+        0;
     grid-template-rows: var(--line-height-sidebar-row-prominent);
     cursor: pointer;
     white-space: nowrap;
@@ -204,8 +207,8 @@
         grid-area: row-content;
     }
 
-    .heading-markers-and-controls {
-        grid-area: markers-and-controls;
+    .heading-markers-and-unreads {
+        grid-area: markers-and-unreads;
         display: flex;
         gap: 5px;
         align-items: center;
@@ -401,8 +404,7 @@
 ul.filters {
     list-style-type: none;
     margin-left: 0;
-    /* Streams take a standard row height. */
-    line-height: var(--line-height-sidebar-row);
+    line-height: var(--line-height-sidebar-row-prominent);
 
     .sidebar-topic-name,
     .left-sidebar-navigation-label-container {
@@ -714,7 +716,11 @@ li.top_left_scheduled_messages {
         var(--left-sidebar-toggle-width-offset) var(
             --left-sidebar-icon-column-width
         )
-        var(--left-sidebar-icon-content-gap) minmax(0, 1fr) max-content 0 0;
+        var(--left-sidebar-icon-content-gap) minmax(0, 1fr) minmax(
+            0,
+            max-content
+        )
+        minmax(0, max-content) 0 0;
 
     .filter-icon {
         grid-area: starting-anchor-element;
@@ -730,7 +736,7 @@ li.top_left_scheduled_messages {
     }
 
     .unread_count {
-        grid-area: markers-and-controls;
+        grid-area: markers-and-unreads;
     }
 }
 
@@ -738,7 +744,7 @@ li.top_left_scheduled_messages {
     &.hide_starred_message_count {
         .masked_unread_count {
             display: block;
-            grid-area: markers-and-controls;
+            grid-area: markers-and-unreads;
             /* Adding margin-right aligns the .masked_unread_count with the rest of the masked unread counts in the channel list. */
             margin-right: var(--masked-unread-count-margin-right);
         }
@@ -833,7 +839,7 @@ li.top_left_scheduled_messages {
        modified or reassigned as needed, without running up against `padding`
        (which alters the box size) or `margin` (which notoriously bleeds outside
        of the element it's defined on). */
-    grid-template-areas: "starting-offset starting-anchor-element icon-content-gap row-content markers-and-controls ending-anchor-element ending-offset";
+    grid-template-areas: "starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset";
 }
 
 .top_left_row {
@@ -844,7 +850,9 @@ li.top_left_scheduled_messages {
     /* The row grid for the outer .top_left_row
        is chiefly for lefthand spacing and placing
        the inner row content and vdots. */
-    grid-template-columns: 0 0 0 minmax(0, 1fr) 0 30px 0;
+    grid-template-columns:
+        0 0 0 minmax(0, 1fr) 0 0 var(--left-sidebar-vdots-width)
+        0;
 
     .sidebar-menu-icon {
         grid-area: ending-anchor-element;
@@ -865,18 +873,18 @@ li.top_left_scheduled_messages {
        that now by having it share this grid template. Its row and column
        definitions have the final say about dimensions and placement. */
     grid-template-areas:
-        "starting-offset starting-anchor-element icon-content-gap row-content markers-and-controls ending-anchor-element ending-offset"
-        ".               .                       filter-box       filter-box  filter-box           filter-box            .            ";
+        "starting-offset starting-anchor-element icon-content-gap row-content controls   markers-and-unreads ending-anchor-element ending-offset"
+        ".               .                       filter-box       filter-box  filter-box filter-box          filter-box            .            ";
 }
 
 #views-label-container {
     margin-right: var(--left-sidebar-right-margin);
     grid-template-columns:
-        0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 0.5fr) minmax(
+        0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 0.5fr) 0 minmax(
             0,
             1fr
         )
-        30px 0;
+        var(--left-sidebar-vdots-width) 0;
     grid-template-rows: 28px;
     cursor: pointer;
     border-radius: 4px;
@@ -901,7 +909,7 @@ li.top_left_scheduled_messages {
         /* Give the sidebar title through the end of the markers
            area, if needed. */
         .left-sidebar-title {
-            grid-column: row-content-start / markers-and-controls-end;
+            grid-column: row-content-start / markers-and-unreads-end;
         }
     }
 
@@ -946,7 +954,7 @@ li.top_left_scheduled_messages {
 
     #left-sidebar-navigation-list-condensed {
         margin: 0;
-        grid-area: markers-and-controls;
+        grid-area: markers-and-unreads;
     }
 
     .left-sidebar-navigation-menu-icon {
@@ -991,7 +999,8 @@ li.top_left_scheduled_messages {
             0,
             max-content
         )
-        30px 0;
+        minmax(0, max-content)
+        var(--left-sidebar-vdots-width) 0;
     white-space: nowrap;
 
     .stream-privacy {
@@ -1031,8 +1040,8 @@ li.top_left_scheduled_messages {
         0 var(--left-sidebar-icon-column-width) var(
             --left-sidebar-icon-content-gap
         )
-        minmax(0, 1fr) minmax(0, max-content)
-        30px 0;
+        minmax(0, 1fr) minmax(0, max-content) minmax(0, max-content)
+        var(--left-sidebar-vdots-width) 0;
 }
 
 .searching-for-more-topics {
@@ -1131,9 +1140,9 @@ li.top_left_scheduled_messages {
     z-index: 1;
 }
 
-.stream-markers-and-controls,
-.topic-markers-and-controls {
-    grid-area: markers-and-controls;
+.stream-markers-and-unreads,
+.topic-markers-and-unreads {
+    grid-area: markers-and-unreads;
     display: flex;
     /* Present a uniform space between icons */
     gap: 5px;
@@ -1317,11 +1326,11 @@ li.topic-list-item {
         var(--left-sidebar-toggle-width-offset) [action-heading-start] var(
             --left-sidebar-icon-column-width
         )
-        var(--left-sidebar-icon-content-gap) minmax(0, 1fr) [action-heading-end] minmax(
+        var(--left-sidebar-icon-content-gap) minmax(0, 1fr) [action-heading-end] 0 minmax(
             0,
             max-content
         )
-        30px 0;
+        var(--left-sidebar-vdots-width) 0;
     grid-template-rows: [action-heading-start] auto [action-heading-end];
 
     .conversation-partners-icon {
@@ -1349,7 +1358,7 @@ li.topic-list-item {
     }
 
     .unread_count {
-        grid-area: markers-and-controls;
+        grid-area: markers-and-unreads;
         /* TODO: This is an alternative method
            for presenting a 16px-tall unread
            counter, regardless of context. This
@@ -1392,8 +1401,9 @@ li.topic-list-item {
     z-index: 2;
     grid-template-columns:
         [topics-content-area-start] var(--left-sidebar-toggle-width-offset)
-        0 0 minmax(0, 1fr)
-        max-content 0 42px [topics-content-area-end];
+        0 0 minmax(0, 1fr) 0
+        max-content 0 var(--left-sidebar-vdots-width)
+        [topics-content-area-end] var(--left-sidebar-right-margin);
     grid-template-rows:
         [topics-content-area-start] var(--line-height-sidebar-row-prominent)
         [topics-content-area-end];
@@ -1421,14 +1431,17 @@ li.topic-list-item {
     }
 
     .unread_count {
-        grid-area: markers-and-controls;
+        grid-area: markers-and-unreads;
     }
 }
 
 #streams_header {
     grid-template-columns:
-        var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
-        minmax(17px, max-content) 30px 0;
+        var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr) minmax(
+            0,
+            max-content
+        )
+        minmax(17px, max-content) var(--left-sidebar-vdots-width) 0;
     /* Keep the stream-search area rows collapsed. */
     grid-template-rows: var(--line-height-sidebar-row-prominent) 0 0;
     cursor: pointer;
@@ -1469,8 +1482,8 @@ li.topic-list-item {
         grid-area: row-content;
     }
 
-    .heading-markers-and-controls {
-        grid-area: markers-and-controls;
+    .heading-markers-and-unreads {
+        grid-area: markers-and-unreads;
         height: 100%;
         display: flex;
         align-items: center;
@@ -1595,8 +1608,8 @@ li.topic-list-item {
    controls. */
 .spectator-view #streams_header {
     grid-template-columns:
-        var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
-        minmax(30px, max-content) 0 0;
+        var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr) 0
+        minmax(var(--left-sidebar-vdots-width), max-content) 0 0;
     margin-right: var(--left-sidebar-right-margin);
 
     /* With markers and controls now sized the same
@@ -1605,7 +1618,7 @@ li.topic-list-item {
        additional logged-out icons be added in the
        future), let's center the icon in that area,
        just like vdots would be. */
-    .heading-markers-and-controls {
+    .heading-markers-and-unreads {
         justify-content: center;
     }
 }
@@ -1722,7 +1735,7 @@ li.topic-list-item {
 
     .direct-messages-search-section {
         display: flex;
-        grid-column: row-content / markers-and-controls;
+        grid-column: row-content / markers-and-unreads;
         margin-top: 5px;
         margin-bottom: 5px;
     }
diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs
index fb2da1cbff..cd57238bbc 100644
--- a/web/templates/left_sidebar.hbs
+++ b/web/templates/left_sidebar.hbs
@@ -147,7 +147,7 @@
     <div id="direct-messages-section-header" class="direct-messages-container hidden-for-spectators zoom-out zoom-in-sticky">
         <i id="toggle-direct-messages-section-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
         <h4 class="left-sidebar-title"><span class="dm-tooltip-target">{{t 'DIRECT MESSAGES' }}</span></h4>
-        <div class="heading-markers-and-controls">
+        <div class="heading-markers-and-unreads">
             <a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
                 <i class="zulip-icon zulip-icon-all-messages" aria-label="{{t 'Direct message feed' }}"></i>
             </a>
@@ -172,7 +172,7 @@
         <div id="streams_list" class="zoom-out">
             <div id="streams_header" class="zoom-in-hide {{#if hide_unread_counts}}hide_unread_counts{{/if}}">
                 <h4 class="left-sidebar-title"><span class="streams-tooltip-target" data-tooltip-template-id="filter-streams-tooltip-template">{{t 'CHANNELS' }}</span></h4>
-                <div class="heading-markers-and-controls">
+                <div class="heading-markers-and-unreads">
                     <i id="filter_streams_tooltip" class="streams_filter_icon zulip-icon zulip-icon-search" aria-hidden="true" data-tooltip-template-id="filter-streams-tooltip-template"></i>
                     <span id="add_streams_tooltip" class="hidden-for-spectators" data-tippy-content="{{t 'Add channels' }}">
                         <i id="streams_inline_icon" class="zulip-icon zulip-icon-square-plus" aria-hidden="true" ></i>
diff --git a/web/templates/more_topics.hbs b/web/templates/more_topics.hbs
index 4674f40d74..2668ad7171 100644
--- a/web/templates/more_topics.hbs
+++ b/web/templates/more_topics.hbs
@@ -3,7 +3,7 @@
   {{#if more_topics_unread_count_muted}}more_topic_unreads_muted_only{{/if}}">
     <div class="topic-box">
         <a class="sidebar-topic-action-heading" tabindex="0">{{t "Show all topics" }}</a>
-        <div class="topic-markers-and-controls">
+        <div class="topic-markers-and-unreads">
             {{#if more_topics_have_unread_mention_messages}}
                 <span class="unread_mention_info">
                     @
diff --git a/web/templates/stream_sidebar_row.hbs b/web/templates/stream_sidebar_row.hbs
index 534fb72917..fcfb35fc4f 100644
--- a/web/templates/stream_sidebar_row.hbs
+++ b/web/templates/stream_sidebar_row.hbs
@@ -10,7 +10,7 @@
 
             <a href="{{url}}" title="{{name}}" class="stream-name">{{name}}</a>
 
-            <div class="stream-markers-and-controls">
+            <div class="stream-markers-and-unreads">
                 <span class="unread_mention_info"></span>
                 <span class="unread_count"></span>
                 <span class="masked_unread_count"></span>
diff --git a/web/templates/topic_list_item.hbs b/web/templates/topic_list_item.hbs
index 91076de792..bc1faad19c 100644
--- a/web/templates/topic_list_item.hbs
+++ b/web/templates/topic_list_item.hbs
@@ -6,7 +6,7 @@
         <a href="{{url}}" class="sidebar-topic-name" title="{{topic_name}}">
             <span class="sidebar-topic-name-inner">{{topic_display_name}}</span>
         </a>
-        <div class="topic-markers-and-controls change_visibility_policy" data-stream-id="{{stream_id}}" data-topic-name="{{topic_name}}">
+        <div class="topic-markers-and-unreads change_visibility_policy" data-stream-id="{{stream_id}}" data-topic-name="{{topic_name}}">
             {{#if contains_unread_mention}}
                 <span class="unread_mention_info">
                     @