gear_menu: Extract the new gear and personal menu style as a theme.

This also fixes some misalignment happening at some widths for gear
menu. Like at XL widths for spectators.

web/src/gear_menu.js

@@ -94,6 +94,7 @@ function render(instance) {
 
 export function initialize() {
     popover_menus.register_popover_menu("#gear-menu", {
+        theme: "navbar-dropdown-menu",
         placement: "bottom",
         offset: [-50, 0],
         popperOptions: {
@@ -109,7 +110,6 @@ export function initialize() {
         },
         onMount(instance) {
             const $popper = $(instance.popper);
-            $popper.addClass("navbar-dropdown-tippy");
             popover_menus.popover_instances.gear_menu = instance;
             $(".focus-dropdown").on("focus", (e) => {
                 e.preventDefault();

web/src/personal_menu_popover.js

@@ -19,6 +19,7 @@ function elem_to_user_id($elem) {
 
 export function initialize() {
     popover_menus.register_popover_menu("#personal-menu", {
+        theme: "navbar-dropdown-menu",
         placement: "bottom",
         offset: [-50, 0],
         // The strategy: "fixed"; and eventlisteners modifier option
@@ -37,7 +38,6 @@ export function initialize() {
         },
         onMount(instance) {
             const $popper = $(instance.popper);
-            $popper.addClass("navbar-dropdown-tippy");
             popover_menus.popover_instances.personal_menu = instance;
 
             tippy(".clear_status", {

web/styles/popovers.css

@@ -47,6 +47,34 @@
     }
 }
 
+.tippy-box[data-theme="navbar-dropdown-menu"] {
+    border: 0;
+    border-radius: 6px;
+
+    > .tippy-content {
+        padding: 0;
+    }
+
+    > .tippy-arrow {
+        top: -5.5px;
+        width: 16px;
+        height: 8px;
+        z-index: 1;
+        filter: drop-shadow(0 -1.25px 0 var(--color-border-dropdown-menu));
+
+        &::before {
+            content: "";
+            top: 0;
+            width: 100%;
+            height: 100%;
+            mask-image: url("../shared/icons/popover-arrow.svg");
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            color: var(--color-background-dropdown-menu);
+        }
+    }
+}
+
 .user_full_name,
 .bot_owner {
     text-overflow: ellipsis;
@@ -1103,10 +1131,7 @@ ul {
 }
 
 .navbar-dropdown-menu {
-    display: flex;
-    flex-flow: column nowrap;
     margin: 0;
-    padding: 0;
     border: solid 1px var(--color-border-dropdown-menu);
     background-color: var(--color-background-dropdown-menu);
     max-height: 85vh;
@@ -1117,6 +1142,7 @@ ul {
     box-shadow: var(--box-shadow-navbar-dropdown-menu);
 
     .simplebar-content {
+        /*  This is necessary to keep long menu items on a single line. */
         min-width: max-content;
     }
 

web/styles/zulip.css

@@ -3428,43 +3428,6 @@ select.invite-as {
     }
 }
 
-.navbar-dropdown-tippy {
-    .tippy-box {
-        border: 0;
-    }
-
-    .tippy-content {
-        padding: 0;
-    }
-
-    & > .tippy-box > .tippy-arrow {
-        position: absolute;
-        left: 50%;
-        top: -5.5px !important;
-        width: 16px;
-        height: 8px;
-        z-index: 1;
-        transform: translateX(-50%);
-        filter: drop-shadow(0 -1.25px 0 var(--color-border-dropdown-menu));
-
-        &::before {
-            display: none;
-        }
-
-        &::after {
-            border: 0 !important;
-            content: "";
-            top: 0;
-            width: 100%;
-            height: 100%;
-            mask-image: url("../shared/icons/popover-arrow.svg");
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: var(--color-background-dropdown-menu);
-        }
-    }
-}
-
 .keyboard-shortcut-option {
     & span.tooltip-hotkey-hint {
         margin-left: auto;