From a17c7dfe0b731340cf60dacf53b951cd98cbb554 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Tue, 22 Aug 2023 09:55:39 -0500
Subject: [PATCH] controls: Present bell icon as a block.

This gives better positioning control over this icon, while not
inviting the side-effects and headaches of introducing another
flexbox.
---
 web/styles/recent_topics.css | 13 +++++++++++--
 web/styles/zulip.css         |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/styles/recent_topics.css b/web/styles/recent_topics.css
index 5e3b78939a..8f50cc1d7b 100644
--- a/web/styles/recent_topics.css
+++ b/web/styles/recent_topics.css
@@ -38,6 +38,10 @@
                 /* Use the same color as the message feed pointer */
                 box-shadow: 0 3px 0 hsl(215deg 47% 50%);
             }
+
+            .change_visibility_policy i {
+                display: block;
+            }
         }
 
         & a {
@@ -204,6 +208,7 @@
         .flex_container .right_part {
             margin-left: auto;
             display: inline-flex;
+            align-items: center;
         }
 
         .recent_topic_actions {
@@ -222,9 +227,13 @@
         }
 
         .recent_topic_actions .recent_topics_focusable {
-            display: flex;
-            align-items: center;
+            /* Keep a uniform distance from the focus-within
+               indicator at bottom. */
             padding-bottom: 3px;
+            /* But push down with margin by the same amount,
+               so as to preserve vertical alignment introduced
+               by the parent flexbox. */
+            margin-top: 3px;
         }
 
         .recent_topics_participants {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 3292d3ffb0..f298a70048 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1495,11 +1495,11 @@ td.pointer {
     align-items: center;
 
     .change_visibility_policy {
-        display: flex;
         cursor: pointer;
 
         i {
             font-size: 17px;
+            display: block;
         }
     }
 }