From 93fb84bc982e7562a411d413c202d780e57eedb1 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Sat, 12 Apr 2025 06:51:22 +0530
Subject: [PATCH] message_row: Remove tag-level filtering in the bookends CSS.

This commit reduces the selector scope and improves the CSS matching
performance by avoiding tag-level filtering in the bookends CSS.

This also removes the `.sub-unsub-message` class from the bookend as it
served no additional support and the `.bookend`` class can be used
directly instead to maintain the styling of this element.
---
 web/styles/dark_theme.css |  4 ++--
 web/styles/zulip.css      | 18 +++++++++---------
 web/templates/bookend.hbs |  6 +++---
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index f13fe03467..be0e5b70ac 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -424,8 +424,8 @@
         background-color: hsl(51deg 100% 23%);
     }
 
-    .sub-unsub-message span::before,
-    .sub-unsub-message span::after,
+    .bookend-label::before,
+    .bookend-label::after,
     .date_row span::before,
     .date_row span::after {
         opacity: 0.15;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 5f1536ceff..b82ddbecf6 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1415,19 +1415,19 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     margin-bottom: 0;
 }
 
-.sub-unsub-message {
+.bookend {
     padding-bottom: 10px;
     text-align: center;
 }
 
-.sub-unsub-message span {
+.bookend-label {
     font-size: 1em;
     display: block;
     padding: 4px;
     overflow: hidden;
 }
 
-.sub-unsub-message .stream-status {
+.bookend .stream-status {
     opacity: 0.6;
 
     & i {
@@ -1445,8 +1445,8 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     }
 }
 
-.sub-unsub-message span::before,
-.sub-unsub-message span::after,
+.bookend-label::before,
+.bookend-label::after,
 .date_row span::before,
 .date_row span::after {
     display: inline-block;
@@ -1458,8 +1458,8 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     border-bottom: 1px solid hsl(0deg 0% 0%);
 }
 
-.sub-unsub-message span::before,
-.sub-unsub-message span::after {
+.bookend-label::before,
+.bookend-label::after {
     width: 50%;
 }
 
@@ -1474,13 +1474,13 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     margin-right: -1px;
 }
 
-.sub-unsub-message span::before,
+.bookend-label::before,
 .date_row span::before {
     right: 0.25em;
     margin-left: -50%;
 }
 
-.sub-unsub-message span::after {
+.bookend-label::after {
     left: 0.25em;
     margin-right: -50%;
 }
diff --git a/web/templates/bookend.hbs b/web/templates/bookend.hbs
index dd94e1dd33..89ce9eb42e 100644
--- a/web/templates/bookend.hbs
+++ b/web/templates/bookend.hbs
@@ -1,11 +1,11 @@
 {{! Client-side Handlebars template for rendering the trailing bookend. }}
-<div class="{{#if is_trailing_bookend}}trailing_bookend {{/if}}bookend sub-unsub-message">
+<div class="{{#if is_trailing_bookend}}trailing_bookend {{/if}}bookend">
     {{#if is_spectator}}
-        <span class="recent-topics-link">
+        <span class="recent-topics-link bookend-label">
             <a href="#recent">{{t "Browse recent conversations" }}</a>
         </span>
     {{else}}
-        <span class="stream-status">
+        <span class="stream-status bookend-label">
             {{#if deactivated}}
                 {{t "This channel has been archived." }}
             {{else if subscribed }}