popovers: Keep font size of popover constant once it is opened.

When changing font size using controls in personal menu popover
and gear menu popover for spectators, font size of popover is
not change so that buttons do not shift.

Also, arrow shown with the popover is removed once font-size
is changed, as popover will be detached from the element which
was clicked to open it.

web/src/gear_menu.ts

@@ -15,6 +15,7 @@ import * as popovers from "./popovers.ts";
 import * as settings_preferences from "./settings_preferences.ts";
 import * as theme from "./theme.ts";
 import {parse_html} from "./ui_util.ts";
+import {user_settings} from "./user_settings.ts";
 
 /*
 For various historical reasons there isn't one
@@ -194,17 +195,27 @@ export function initialize(): void {
                     );
                 information_density.update_information_density_settings($(this), changed_property);
                 information_density.enable_or_disable_control_buttons($popper);
+
+                if (changed_property === "web_font_size_px") {
+                    // We do not want to display the arrow once font size is
+                    // changed because popover will be detached from the gear
+                    // icon as we do not change the font size in popover.
+                    $("#gear-menu-dropdown").closest(".tippy-box").find(".tippy-arrow").hide();
+                }
+
                 e.preventDefault();
             });
 
-            const resizeObserver = new ResizeObserver(() => {
-                requestAnimationFrame(() => {
-                    void instance.popperInstance?.update();
-                });
-            });
-            resizeObserver.observe(document.querySelector("#gear-menu-dropdown")!);
-
             information_density.enable_or_disable_control_buttons($popper);
+
+            // We do not want font size of the popover to change when changing
+            // font size using the buttons in popover, so that the buttons do
+            // not shift.
+            const font_size =
+                popover_menus.POPOVER_FONT_SIZE_IN_EM * user_settings.web_font_size_px;
+            $("#gear-menu-dropdown")
+                .closest(".tippy-box")
+                .css("font-size", font_size + "px");
         },
         onShow: render,
         onHidden(instance) {

web/src/personal_menu_popover.ts

@@ -119,6 +119,14 @@ export function initialize(): void {
                 const data: Record<string, number> = {};
                 data[changed_property] = new_setting_value;
                 information_density.enable_or_disable_control_buttons($popper);
+
+                if (changed_property === "web_font_size_px") {
+                    // We do not want to display the arrow once font size is changed
+                    // because popover will be detached from the user avatar as we
+                    // do not change the font size in popover.
+                    $("#personal-menu-dropdown").closest(".tippy-box").find(".tippy-arrow").hide();
+                }
+
                 void channel.patch({
                     url: "/json/settings",
                     data,
@@ -140,15 +148,17 @@ export function initialize(): void {
                 e.preventDefault();
             });
 
-            const resizeObserver = new ResizeObserver(() => {
-                requestAnimationFrame(() => {
-                    void instance.popperInstance?.update();
-                });
-            });
-            resizeObserver.observe(document.querySelector("#personal-menu-dropdown")!);
-
             information_density.enable_or_disable_control_buttons($popper);
             void instance.popperInstance?.update();
+
+            // We do not want font size of the popover to change when changing
+            // font size using the buttons in popover, so that the buttons do
+            // not shift.
+            const font_size =
+                popover_menus.POPOVER_FONT_SIZE_IN_EM * user_settings.web_font_size_px;
+            $("#personal-menu-dropdown")
+                .closest(".tippy-box")
+                .css("font-size", font_size + "px");
         },
         onShow(instance) {
             const args = popover_menus_data.get_personal_menu_content_context();

web/src/popover_menus.ts

@@ -56,6 +56,10 @@ export const popover_instances: Record<PopoverName, tippy.Instance | null> = {
     color_picker_popover: null,
 };
 
+// Font size in em for popover derived from popover font size being
+// 15px at base font size of 14px.
+export const POPOVER_FONT_SIZE_IN_EM = 1.0714;
+
 /* Keyboard UI functions */
 export function popover_items_handle_keyboard(key: string, $items?: JQuery): void {
     if (!$items) {