left_sidebar: Present better-aligned masked unreads as icons.

web/styles/app_components.css

@@ -628,15 +628,6 @@ input.settings_text_input {
     opacity: 0.7;
 }
 
-.masked_unread_count {
-    float: right;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: var(--color-masked-unread-marker);
-    display: none;
-}
-
 /* Implement the web app's default-hidden convention for alert
    elements.  Portico pages lack this CSS and thus show them by
    default. */

web/styles/app_variables.css

@@ -239,6 +239,9 @@
     /* space direct message / stream / topic names from unread counters
     and @ mention indicators by 3px on the right */
     --left-sidebar-before-unread-count-padding: 3px;
+    /* 15px is the approximate width of a single-digit
+       unread marker. */
+    --left-sidebar-single-digit-unread-width: 15px;
     --left-sidebar-right-margin: 12px;
     /* 289px at 14px/1em */
     --left-sidebar-max-width: calc(
@@ -396,7 +399,6 @@
     it doesn't leak through message header.
     */
     --unread-marker-left: -1px;
-    --masked-unread-count-margin-right: 3px;
 
     /*
     Compose-recipient box minimum height. Used in a flexbox context to

web/styles/left_sidebar.css

@@ -61,6 +61,16 @@
     max-width: 18em;
 }
 
+.masked_unread_count {
+    font-size: 8px;
+    display: none;
+    /* Masked unreads display as flex when revealed. */
+    align-items: center;
+    justify-content: center;
+    color: var(--color-masked-unread-marker);
+    width: var(--left-sidebar-single-digit-unread-width);
+}
+
 #stream_filters {
     overflow: visible;
     margin-bottom: 5px;
@@ -95,14 +105,7 @@
 
     .stream-with-count.hide_unread_counts {
         .masked_unread_count {
-            display: block;
-            /* Shift masked dot to align with
-               the least-significant digit on
-               unreads in other rows.
-               We have to do this with margin,
-               because width or padding will
-               distort the CSS-created dot. */
-            margin-right: var(--masked-unread-count-margin-right);
+            display: flex;
         }
 
         .unread_count {
@@ -767,10 +770,8 @@ li.top_left_scheduled_messages {
 .top_left_starred_messages {
     &.hide_starred_message_count {
         .masked_unread_count {
-            display: block;
+            display: flex;
             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);
         }
 
         .unread_count {
@@ -1183,6 +1184,7 @@ li.top_left_scheduled_messages {
     /* Present a uniform space between icons */
     gap: 5px;
     align-items: center;
+    justify-content: center;
 
     .unread_mention_info {
         /* Unset margin in favor of flex gap. */
@@ -1501,7 +1503,8 @@ li.topic-list-item {
             0,
             max-content
         )
-        minmax(17px, max-content) var(--left-sidebar-vdots-width) 0;
+        minmax(0, 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;
@@ -1612,10 +1615,7 @@ li.topic-list-item {
         }
 
         .masked_unread_count {
-            display: block;
-            /* Hold space enough so single-digit
-               unreads don't shift on hover. */
-            margin: 0 3px;
+            display: flex;
         }
 
         &:hover {

web/templates/left_sidebar.hbs

@@ -116,7 +116,9 @@
                     {{~!-- squash whitespace --~}}
                     <span class="left-sidebar-navigation-label">{{t 'Starred messages' }}</span>
                     <span class="unread_count"></span>
-                    <span class="masked_unread_count"></span>
+                    <span class="masked_unread_count">
+                        <i class="zulip-icon zulip-icon-masked-unread"></i>
+                    </span>
                 </a>
                 <span class="arrow sidebar-menu-icon starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>
             </li>
@@ -182,7 +184,9 @@
                 </div>
                 <div class="heading-markers-and-unreads">
                     <span class="unread_count"></span>
-                    <span class="masked_unread_count"></span>
+                    <span class="masked_unread_count">
+                        <i class="zulip-icon zulip-icon-masked-unread"></i>
+                    </span>
                 </div>
 
                 <div class="notdisplayed stream_search_section">

web/templates/stream_sidebar_row.hbs

@@ -19,7 +19,9 @@
             <div class="stream-markers-and-unreads">
                 <span class="unread_mention_info"></span>
                 <span class="unread_count"></span>
-                <span class="masked_unread_count"></span>
+                <span class="masked_unread_count">
+                    <i class="zulip-icon zulip-icon-masked-unread"></i>
+                </span>
             </div>
 
             <span class="sidebar-menu-icon stream-sidebar-menu-icon"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>