left_sidebar: Better handle bracket with resolved topics.

web/styles/app_variables.css

@@ -539,6 +539,14 @@
     --color-background-navbar: hsl(0deg 0% 97%);
     --color-background-active-narrow-filter: hsl(202deg 56% 91%);
     --color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%);
+    /* We mix an opaque version with the background for
+       replicating the color on .sidebar-topic-check, which
+       will mask a portion of the topic-grouping bracket. */
+    --color-background-opaque-hover-narrow-filter: color-mix(
+        in srgb,
+        hsl(120deg 12.3% 71.4%) 38%,
+        hsl(0deg 0% 94%)
+    );
     --color-navbar-bottom-border: hsl(0deg 0% 80%);
     --color-unread-marker: hsl(217deg 64% 59%);
     --color-masked-unread-marker: hsl(0deg 0% 80%);
@@ -946,6 +954,14 @@
     --color-background-navbar: hsl(0deg 0% 13%);
     --color-background-active-narrow-filter: hsl(200deg 17% 18%);
     --color-background-hover-narrow-filter: hsl(136deg 25% 73% / 20%);
+    /* We mix an opaque version with the background for
+       replicating the color on .sidebar-topic-check, which
+       will mask a portion of the topic-grouping bracket. */
+    --color-background-opaque-hover-narrow-filter: color-mix(
+        in srgb,
+        hsl(136deg 25% 73%) 20%,
+        hsl(0deg 0% 11%)
+    );
     --color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
     --color-unread-marker: hsl(217deg 64% 59%);
     --color-masked-unread-marker: hsl(0deg 0% 30%);

web/styles/left_sidebar.css

@@ -307,6 +307,12 @@ li.show-more-topics {
     &.top_left_row:hover,
     &.bottom_left_row:hover {
         background-color: var(--color-background-hover-narrow-filter);
+
+        .sidebar-topic-check {
+            background-color: var(
+                --color-background-opaque-hover-narrow-filter
+            );
+        }
     }
 }
 
@@ -478,6 +484,10 @@ li.active-sub-filter {
     position: relative;
     border-radius: 4px;
     background-color: var(--color-background-active-narrow-filter);
+
+    .sidebar-topic-check {
+        background-color: var(--color-background-active-narrow-filter);
+    }
 }
 
 #stream_filters .narrow-filter.active-filter {
@@ -954,6 +964,18 @@ li.top_left_scheduled_messages {
     justify-self: end;
     /* 15px at 14px/1em */
     font-size: 1.0714em;
+    /* Use background to mask part of grouping bracket. */
+    padding-left: 3px;
+    /* Keep background from affecting rounded corners on
+       .active-sub-filter by reducing the checkbox
+       line-height to match its font size. */
+    line-height: 1;
+    /* As a grid item, adjust the checkmark's z-index here so
+       that the background color appears above the grouping
+       bracket's bottom line. Its value must less than
+       the z-index set on the #streams_header selector. */
+    z-index: 1;
+    background-color: var(--color-background);
 }
 
 .stream-markers-and-controls,
@@ -1111,11 +1133,7 @@ ul.topic-list::after {
     /* 12px at 16px/1em */
     bottom: 0.75em;
     left: 16px;
-    /* The bottom bracket should avoid colliding
-       with the checkmark on resolved topics, as
-       would otherwise happen when the last topic
-       in a list is resolved. */
-    width: 8px;
+    width: 12px;
     border-bottom: 1px solid var(--color-topic-indent-border);
     pointer-events: none;
 }
@@ -1251,10 +1269,8 @@ li.topic-list-item {
     position: sticky;
     /* Keep sticky within SimpleBar context. */
     top: 0;
+    z-index: 2;
     background-color: var(--color-background);
-    /* Ideally, 0px should work here, but maybe simplebar is doing something
-       that is creating `0.5px` extra gap in zoomed-in windows. */
-    z-index: 1;
 
     &.showing-stream-search-section {
         /* Open up the stream-search rows. The 10px