From 75c874fef63fce4b4232e152b3fcc3a787ec2990 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Mon, 23 Oct 2023 07:22:47 +0000
Subject: [PATCH] personal_menu: Fix focus outline of clear status icon.

---
 web/styles/popovers.css         | 11 ++++++++++-
 web/templates/personal_menu.hbs |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 8c762e3c86..307e23b371 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -1217,14 +1217,23 @@ ul {
 }
 
 .personal-menu-clear-status {
+    display: flex;
+    padding: 3px;
+    align-items: center;
     margin-left: auto;
     color: hsl(0deg 0% 40%) !important;
+    border-radius: 4px;
 
-    &:hover {
+    &:hover,
+    &:focus {
         text-decoration: none;
     }
 }
 
+.personal-menu-clear-status .personal-menu-clear-status-icon {
+    top: 0;
+}
+
 #gear-menu-dropdown {
     padding: 5px 0;
     box-shadow: var(--box-shadow-gear-menu);
diff --git a/web/templates/personal_menu.hbs b/web/templates/personal_menu.hbs
index 600c96bca1..9e56672219 100644
--- a/web/templates/personal_menu.hbs
+++ b/web/templates/personal_menu.hbs
@@ -43,7 +43,7 @@
                                 </span>
                             </span>
                             <a href="" class="personal-menu-clear-status navbar-dropdown-menu-link" aria-label="{{t 'Clear status'}}" data-tippy-content="{{t 'Clear your status' }}">
-                                <i class="navbar-dropdown-icon zulip-icon zulip-icon-x-circle"></i>
+                                <i class="personal-menu-clear-status-icon navbar-dropdown-icon zulip-icon zulip-icon-x-circle"></i>
                             </a>
                         </li>
                         <li class="link-item navbar-dropdown-menu-inner-list-item">