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

@@ -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,

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.
     */