left_sidebar: Establish filter rows as grids.

web/styles/left_sidebar.css

@@ -54,6 +54,10 @@ $before_unread_count_padding: 3px;
     cursor: pointer;
 }
 
+#left-sidebar-navigation-list .filter-icon i {
+    color: var(--color-left-sidebar-navigation-icon);
+}
+
 #stream_filters,
 #left-sidebar-navigation-list {
     margin-right: 12px;
@@ -200,8 +204,6 @@ li.show-more-topics {
 
 .left-sidebar-navigation-area {
     & li a {
-        margin-top: 1px;
-
         &:hover {
             text-decoration: none;
         }
@@ -567,44 +569,12 @@ li.active-sub-filter {
     margin-bottom: $sections_vertical_gutter;
 
     .left-sidebar-navigation-label-container {
-        display: flex;
-        padding-right: 20px;
-
         .left-sidebar-navigation-label {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-
-            flex-grow: 1;
         }
     }
-
-    .filter-icon {
-        display: inline-block;
-        min-width: $left_col_size;
-        text-align: center;
-    }
-
-    .filter-icon i {
-        padding-right: 3px;
-        color: var(--color-left-sidebar-navigation-icon);
-    }
-
-    i.fa-align-left {
-        position: relative;
-        font-size: 15px;
-    }
-
-    .top_left_row .unread_count {
-        margin-top: 2px;
-    }
-
-    .zulip-icon-inbox,
-    .zulip-icon-star-filled {
-        font-size: 14px;
-        top: 2px;
-        position: relative;
-    }
 }
 
 .top_left_starred_messages .unread_count,
@@ -626,13 +596,9 @@ li.top_left_drafts,
 li.top_left_inbox,
 li.top_left_recent_view,
 li.top_left_scheduled_messages {
+    /* TODO: Clean this up with other vdots
+       positioning stuff. */
     position: relative;
-    padding-top: 1px;
-    padding-bottom: 1px;
-
-    & a {
-        display: block;
-    }
 }
 
 /* Don't show the scheduled messages item... */
@@ -640,13 +606,63 @@ li.top_left_scheduled_messages {
     display: none;
     /* ...unless there are scheduled messages to show. */
     &.show-with-scheduled-messages {
-        display: list-item;
+        /* Use display: grid to preserve the grid
+           layout when visible. */
+        display: grid;
     }
 }
 
 .top_left_row {
-    padding-left: $far_left_gutter_size;
-    padding-right: 10px;
+    /* 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: 7px 0 minmax(0, 1fr) 0 30px 0;
+
+    .sidebar-menu-icon {
+        grid-area: ending-anchor-element;
+        justify-self: center;
+        /* TODO: Clean up the .sidebar-menu-icon descendant
+           styles up and down the left sidebar. */
+        position: static;
+        font-size: 17px;
+        text-align: center;
+    }
+}
+
+.left-sidebar-navigation-label-container {
+    grid-area: row-content;
+    /* The label container itself is also a grid,
+       for laying out the items that are its
+       children. Same template areas, different
+       column widths. */
+    grid-template-columns: 0 22px minmax(0, 1fr) max-content 0 0;
+    /* This is a legacy value, from a former
+       1px of top padding on top_left_row plus
+       an inner 1px top margin on `<a>` elements.
+
+       These are added here, rather than on the label
+       container, to keep all hovered/highlighted areas
+       clickable.
+
+       This complicates true centering within a
+       row highlight. It might be better to make
+       these both 2px.
+    */
+    padding-top: 2px;
+    padding-bottom: 1px;
+
+    .filter-icon {
+        grid-area: starting-anchor-element;
+        text-align: center;
+    }
+
+    .left-sidebar-navigation-label {
+        grid-area: row-content;
+    }
+
+    .unread_count {
+        grid-area: markers-and-controls;
+    }
 }
 
 .conversation-partners {
@@ -664,6 +680,8 @@ li.top_left_scheduled_messages {
 
 /* New .topic-box grid definitions here. */
 #views-label-container,
+.top_left_row,
+.left-sidebar-navigation-label-container,
 .subscription_block,
 .topic-box {
     display: grid;
@@ -721,7 +739,7 @@ li.top_left_scheduled_messages {
             /* ...except when there is an active filter in place:
                that row should still be shown. */
             & .top_left_row.active-filter {
-                display: block;
+                display: grid;
             }
         }
     }