From ca9b1060b7bf96ba64bdebbb5f0534029ec32f53 Mon Sep 17 00:00:00 2001
From: Sayam Samal <samal.sayam@gmail.com>
Date: Thu, 7 Dec 2023 03:24:38 +0530
Subject: [PATCH] navbar_dropdowns: Let menu items control the width of
 dropdown menus.

Through this commit, we set the width of the navbar dropdowns to be
equal to the longest menu item, via the min-content intrinsic sizing.

Note, that the min-content width takes into account all soft-wrapping
opportunities, which could result in the wrapping of the menu items in
many cases. To prevent this, we use the white-space property to prevent
menu items from wrapping in any case.
---
 web/styles/popovers.css | 11 +++++++++--
 web/styles/zulip.css    |  3 +++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index e0baee432d..772c789f99 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -1208,15 +1208,22 @@ ul {
     border: solid 1px var(--color-border-dropdown-menu);
     background-color: var(--color-background-dropdown-menu);
     max-height: 85vh;
-    min-width: 230px;
     overflow-x: hidden;
     user-select: none;
     border-radius: 6px;
     box-shadow: var(--box-shadow-navbar-dropdown-menu);
 
     .simplebar-content {
+        min-width: var(--popover-menu-min-width);
+        /*  This is necessary to set the dropdown menu width equal to
+            the width of the longest menu item, thus letting the menu
+            items control the width of the menu. */
+        width: min-content;
+    }
+
+    .navbar-dropdown-menu-inner-list-item {
         /*  This is necessary to keep long menu items on a single line. */
-        min-width: max-content;
+        white-space: nowrap;
     }
 
     .text-item,
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 862287400f..a55f574451 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -104,6 +104,9 @@ body {
     --right-sidebar-width: 250px;
     --left-sidebar-header-icon-width: 15px;
 
+    /* Tippy popover related values */
+    --popover-menu-min-width: 230px;
+
     /*
     Message box elements and values.
     */